Créer des instructions conditionnelles pour JQuery

Question

J'ai une question très novice, donc excuses si la réponse à cette question est évidente. J'utilise JQuery pour basculer le contenu des éléments en fonction de si l'élément a été cliqué. J'ai réussi à implémenter la fonction bascule.

Je dois maintenant le charger avec les deux premiers éléments mis à show() avec le reste à hide(). J'ai donné un nom de classe unique à ces deux premiers articles. Je sais que je peux simplement faire un $('div.activeitem').show() puis me cacher le reste, mais je préférerais configurer une condition. Je suis un novice JQuery, donc je ne sais pas comment cibler ces éléments ou leurs classes dans une instruction conditionnelle. J'ai cherché Google, mais j'ai échoué. Je veux un conditionnel qui demande si la div "newsinfo" a aussi la classe "jopen" puis show(), sinon hide().

Merci pour votre aide. Je joins mon code pour vous aider à comprendre le contexte de ma question:

<script type="text/javascript"> 
       $(document).ready(function(){ 
        // Here is where I'd like to implement a conditional 
        $('div.newsinfo').hide(); // this would be part of my else 
        $('h5.newstoggle').click(function() { 
         $(this).next('div').slideToggle(200); 
         return false; 
        }); 
       }); 
</script> 

Answer 1

Que diriez-vous simplement

$('div.newsinfo').each(function(){ 
    if($(this).hasClass('jopen')){ 
     $(this).show() 
    }else{ 
     $(this).hide(); 
    } 
}); 

Answer 2

il est fonction hasClass(). Le meilleur moyen est d'utiliser toggleClass().

Par exemple:

$('div.blocks').click(function(){ 
    $(this).toggleClass('class_name'); 
}); 

après la première classe de clic sera ajouté, après la deuxième - enlevé ... et ainsi de suite ^^

Answer 3

JQuery a un. hasClass fonction.

à savoir

if($(".selectableItem").hasClass("selected")){ 
    //remove selection 
    $(".selectableItem").removeClass("selected"); 
}else{ 
    //remove the selected class from the currently selected one 
    $(".selectableItem .selected").removeClass("selected"); 
    //add it to this one 
    $(".selectableItem").addClass("selected"); 
} 

Answer 4

Pourquoi ne pas ajouter un css par défaut Jopen classe display: block et les autres à display: none?

quelque chose comme

.newsinfo {display: none} 
.jopen {display:block!important} 

Answer 5

Il suffit d'utiliser les sélecteurs. Par exemple, si tous les divs avec la classe "newsinfo" sont visibles par défaut:

$("div.newsinfo:not(.jopen)").hide();

S'ils sont tous cachés par défaut:

$("div.newsinfo.jopen").show();