Mit $ (this) innerhalb eines if-Anweisung

Question

Ich versuche, ein Akkordeon mit drei Platten zu machen, so dass, wenn ich auf einem Panel seines Inhalt klicken soll angezeigt werden und wenn ich es noch einmal auf seinen Inhalt

Hier verschwinden dem jQuery-Code ist

jQuery(".item").click(function() { 

    if (jQuery(".content").css("display") == "block") 
    { 
     jQuery(this).css("display", "none"); 
    } 

    else if (jQuery(".content").css("display") == "none") 
    { 
     jQuery(this).css("display", "block"); 
    } 
} 

Aber das Problem hier ist, dass jQuery (this) hier auf die Klasse „.Item“ natürlich, und die ganze Platte verschwindet, wenn darauf geklickt bezieht.

Deshalb möchte ich „.content“ beziehen so dass nur der Inhalt der Platte, auf die geklickt wird, sollte angezeigt werden oder nicht.

Dies ist der HTML-Code:

<div class="container"> 
    <div calss="row"> 
     <div class="accordion"> 

      <div class="item"> 
       <div class="content"></div> 
      </div> 

      <div class="item"> 
       <div class="content"></div> 
      </div> 

      <div class="item"> 
       <div class="content"></div> 
      </div> 

     </div> 
    </div> 
</div> 

Ich habe versucht, diese

jQuery(".item").click(function() { 

    if (jQuery(".content").css("display") == "block") 
    { 
     jQuery(".content").css("display", "none"); 
    } 

    else if (jQuery(".content").css("display") == "none") 
    { 
     jQuery(".content").css("display", "block"); 
    } 
} 

aber dann, wenn geklickt haben, wird der Inhalt aller drei Platten/disapear erscheinen. Irgendwelche Vorschläge würden geschätzt werden

Answer 1

Wenn Sie this im zweiten Argument von jQuery übergeben, findet es .content innerhalb this. Wie so:

jQuery(".item").click(function() { 

    if (jQuery(".content", this).css("display") == "block") 
    { 
     jQuery(".content", this).css("display", "none"); 
    } 

    else if (jQuery(".content", this).css("display") == "none") 
    { 
     jQuery(".content", this).css("display", "block"); 
    } 
}) 

Ihr Click-Handler wird alle Elemente mit dem Wähler zu finden, so this vorbei den Umfang begrenzen, das Element zu finden zu verbergen/zeigen.

Um diesen Code zu optimieren, versuchen Sie, in Variablen zu speichern, da der Aufruf von jQuery/$() teuer sein kann, insbesondere wenn Sie innerhalb des Handlers mehrmals auf das Element zugreifen müssen. Sie können die Funktion toggle verwenden, um ihren Status von sichtbar nach versteckt und umgekehrt umzuschalten.

jQuery(".item").click(function() { 

    jQuery(".content", this).toggle(); 
}); 

Answer 2

Der Konstruktor jQuery ein zweites Argument nehmen Art, dass das Element, aus dem die Suche zu starten, verwenden Sie würden daher:

jQuery('.content', this) 

das ist semantisch identisch (aber kürzer) als:

jQuery(this).find('.content') 

Sie sollten die Optimierung Ihren Code betrachten unnötige Wiederholung und Bewertung der Wähler zu vermeiden:

jQuery('.item').on('click', function() { 
    var content = jQuery('.content', this); 
    var display = content.css('display'); 

    if (display === 'block') { 
     display = 'none'; 
    } else if (display === 'none') { 
     display = 'block'; 
    } 
    content.css('display', display); 
} 

oder besser noch, verwenden Sie einfach die integrierten in jQuery Methoden für die Sichtbarkeit von Elementen Makeln und Übergänge animiert (wenn Sie sollten sie wollen) kostenlos:

jQuery('.item').on('click', function() { 
    jQuery('.content', this).toggle(); 
}