jquery show and toggle funktioniert nicht

Question

Um dies schnell vorwegzunehmen, mache ich einen Webdesign-Einführungskurs und wir müssen eine grundlegende Filterfunktion auf unserer Seite haben, die uns befohlen wurde, den Filter nach Klassenmethode zu verwenden.

Für meine Website filtere ich Musik Album Cover nach Genre, aber ich möchte, dass sie in der Lage sein, im selben Genre zu sein. Der Code, den ich bisher geschrieben habe, verbirgt alle Album-Cover-Elemente in Ordnung, zeigt aber nicht nur die, die ich möchte.

Ich habe einige Kommentare zum Debuggen und ich habe auch in einer der Zeilen versucht, genauer zu sein, was divs zu zeigen, d. H. Diejenigen mit mehr als einer Klasse.

$("ul.rock").click(function() { 
     console.log("rock clicked"); 
     $("div.recordElement").toggle(); 
     $("div.recordElement.pop").toggle(); 
     $(".dropDownMenu").toggle(); 
    }); 

Die div mit der Klasse DropDownMenu muss auch versteckt werden, wie es aus dem ein Drop-Down-Menü ist der Benutzer ein Genre auswählt, die versteckt werden muss, nachdem der Benutzer eine Auswahl trifft.

<div id="dropDownMenu" class="dropDownMenu"> 
        <ul class="rock">Rock</ul> 
        <ul class="pop">Pop</ul> 
        <ul class="metal">Metal</ul> 
        <ul class="alternative">Alternative</ul> 
        <ul class="country">Country</ul> 
       </div> 
      </div> 
      <div id="inStoreRecordsContainer"> 
       <div class="recordElement" class="pop"> 
        <img src="img/inStoreMusic/bowie.jpg"> 
        <p class="recordInfo">David Bowie<br>Aladdin Sane</p> 
       </div> 
       <div class="recordElement" class="rock" class="metal"> 
        <img src="img/inStoreMusic/metallica.jpg"> 
        <p class="recordInfo">Metallica<br>Master of Puppets</p> 
       </div> 
       <div class="recordElement" class="rock" class="pop"> 
        <img src="img/inStoreMusic/nirvana.jpg"> 
        <p class="recordInfo">Nirvana<br>Nevermind</p> 
       </div> 
       <div class="recordElement" class="pop"> 
        <img src="img/inStoreMusic/blink182.jpg"> 
        <p class="recordInfo">Blink 182<br>California</p> 
       </div> 
       <div class="recordElement" class="pop"> 
        <img src="img/inStoreMusic/beatles.jpg"> 
        <p class="recordInfo">The Beatles<br>Sgt. Pepper's Lonely Hearts Club Band</p> 
       </div> 
       <div class="recordElement" class="pop"> 
        <img src="img/inStoreMusic/beyonce.jpg"> 
        <p class="recordInfo">Beyoncé<br>Beyoncé <i>(not a typo)</i></p> 
       </div> 
       <div class="recordElement" class="country"> 
        <img src="img/inStoreMusic/cash.jpg"> 
        <p class="recordInfo">Jonny Cash<br>CASH</p> 
       </div> 

Könnte es sein, dass ich versuche, dies mit Elementen mit mehr als einer Klasse zu tun? Ich habe versucht, nach einer Lösung zu googlen, und andere Benutzer haben das gleiche Problem gelöst, indem sie show/hide durch toggle ersetzt haben, während beides nicht für mich funktioniert.

Answer 1

Das Problem ist, dass Sie mehrere class Attribute haben. Sie müssen alle Ihre Klassen demselben Attribut-Tab wie folgt hinzufügen: .

Der HTML-Parser verwendet im Allgemeinen das letzte Attribut eines angegebenen Namens, überschreibt nachfolgende Attribute.

Answer 2

Die markierte Antwort löst das Hauptproblem. Um das dropDownMenu-Element anzuzeigen/auszublenden, nachdem der Benutzer eine Auswahl getroffen hat, sollte die Lösung eine separate Funktion haben, die das Element beim Klicken auf das Element umschaltet. Im Gegensatz zu allen 5 Sortierfunktionen des Albums verstecken Sie auch das DropDownMenu.