2010-11-30 26 views
2

J'ai trouvé des questions similaires, mais rien qui couvre exactement ce dont j'ai besoin. Je l'ai gardé simple dans mon exemple et je veux utiliser JQuery.JQuery masquer Classe si une autre classe est visible ou affichée

J'ai deux classes. Je veux cacher le div "filter" si le div "category" est affiché au chargement de la page. Il n'y a actuellement aucun style associé à l'une ou l'autre classe. Je crois que je suis assez proche mais ça ne marche pas.

<script language="text/javascript"> 
if(!$(this).hasClass("category")){ 
$('filter').css('display', 'none'); 
} 
</script> 

<div class="category">By Category</div> 
<div class="filter">By Custom Filter</div> 

Merci d'avance!

+0

Est-ce que votre code exact? 'this' ne se référera pas' .catagory' à moins que ce code ne soit dans un gestionnaire quelconque. – Alex

+0

Merci beaucoup les gars, malheureusement, je ne peux toujours pas le faire fonctionner correctement. Lorsque je charge la page, je ne devrais pas être en mesure de voir le texte "Par filtre personnalisé" .. et je le fais toujours. Je dois manquer quelque chose ici. – ToddN

+0

Juste pour être sûr, avez-vous ajouté jQuery à votre site? Le code ressemblerait à ceci: ''. – tinifni

Répondre

4

Utilisation .length pour tester si un élément est présent.

Utilisez .hide() & .show() pour afficher et masquer les éléments. Enfin, vous voulez que le code ne s'exécute que lorsque la page a fini de se charger, donc vous voulez tout mettre en $(document).ready().

donc quelque chose comme ça devrait fonctionner mieux:

<script language="text/javascript"> 
    $(document).ready(function() { 
     //following code will hide all elements with a class of 'filter' 
     //if any elements with a class of 'category' are found 
     if($('.category').length){ 
      $('.filter').hide(); 
     } 
    }); 
</script> 

<div class="category">By Category</div> 
<div class="filter">By Custom Filter</div> 

HTHS,
Charles

+0

Vous avez le bon concept, exactement ce que je cherche à accomplir, mais je ne peux pas le faire fonctionner. Peut-être mon lien JQuery est mauvais: src = "https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"? Des idées? – ToddN

+0

Cela a résolu mon problème merci! Pour une raison quelconque, le JQuery auquel je faisais des liens ne fonctionnait pas. – ToddN

2

Changer le sélecteur sur $('.filter')

2
var $filter = $(".filter"); 
var $category = $(".category"); 

$category.is(":visible") ? $filter.hide() : $filter.show(); 
0

jQuery

$('div').each(function() { 
    if ($(this).hasClass("category")) { 
     $('.filter').css('display', 'none'); 
    } 
}); 

ou tout simplement:

if ($('.category').length) { 
    $('.filter').css('display', 'none'); 
} 
0
<div class="category">By Category</div> 
<div class="filter">By Custom Filter</div> 

En supposant que "montré au chargement de la page" signifie "rendu" et non la visibilité "show/hide".

$('.category').each(function(){ 
    $('.filter').hide(); 
});