jqueryのshowとtoggleの機能が動作しない

Question

私はすぐにWebデザインの導入コースをやっています。私たちはサイトのフィルタメソッドを使用するように言われた、基本的なフィルタ機能を持っている必要があります。

私のサイトでは、ジャンル別に音楽アルバムをカバーしていますが、それぞれが同じジャンルになることができるようにしたいと思います。私が今までに書いたコードは、すべてのアルバムカバー要素を隠していますが、私が望むものだけを表示しません。

私はデバッグのためにいくつかのコメントを持っていますが、私はまた、どのdivを表示するか、つまり複数のクラスを持つものについてより具体的にしようとしました。

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

クラスdropDownMenuを持つdiv要素はまた、ユーザーは、ユーザーが選択を行うの後に隠される必要があるジャンルを選択し、そこからドロップダウンメニューだとして非表示にする必要があります。

<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> 

複数のクラスを持つ要素でこれを実行しようとしている可能性がありますか？私は解決策のためにグーグルを試み、他のユーザーは同じ問題をshow/hideをtoggleに置き換えて解決しましたが、どちらも私のために働いていませんでした。

Answer 1

多くのclass属性があります。すべてのクラスを同じ属性タブ（class="recordElement rock metal"）に追加する必要があります。

一般に、htmlパーサーは与えられた名前の最後の属性を使用し、後続の属性をオーバーライドします。

Answer 2

ユーザが選択した後にdropDownMenu要素を表示/非表示するために、要素自体がクリックされたときに要素を切り替える別の機能をソリューションに持たせることが主な問題を解決しました。 5つのアルバムソート機能をすべて持っているのとは対照的に、dropDownMenuも隠しています。

$("div.dropDownMenu").click(function() { 
    $("div.dropDownMenu").toggle(); 
});