jquery顯示和切換功能不工作

爲了快速說明這一點，我正在做一個網頁設計入門課程，我們需要在我們的網站上有一個基本的過濾功能，我們被告知要使用過濾器的類方法。jquery顯示和切換功能不工作

對於我的網站我正在按流派過濾音樂專輯封面，但我希望他們每個都能夠處於相同的流派。我寫的代碼到目前爲止隱藏了所有專輯封面元素，但不會顯示只有我想要的。

我對調試有一些意見，我也嘗試在其中一行中更具體地說明要顯示哪些div，即具有多個類的div。

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

與類dropDownMenu股利也需要被隱藏，因爲它是從哪個用戶選擇需要被隱藏在用戶作出選擇後一個流派的下拉菜單。

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

難道是我試圖做到這一點與多個類的元素？我試着用Google搜索一個解決方案，其他用戶通過替換顯示/隱藏來解決同樣的問題，但兩者都不適合我。

來源

2017-01-07 ebeck

問題是你有多個class屬性。您需要將所有類添加到相同的屬性選項卡中，如下所示：class="recordElement rock metal"。

html解析器通常使用給定名稱的最後一個屬性，並覆蓋後續屬性。

來源

2017-01-07 00:48:59

這已經解決了顯示和隱藏專輯封面的問題，但是我仍然遇到顯示和隱藏.dropDownMenu div的問題。這是包含用戶必須從中選擇的選項。我試過以下內容： $（$（「div.dropDownMenu」）.css（「display」，「none」）;以及 $（「div.dropDownMenu」）。toggle（）; 我已經注意到，在chrome dev模式下，元素樣式正在改變爲display：block，然後不會改回，而不是在CSS中更改顯示屬性。 – ebeck

看起來您可能有一個額外的結尾' ''（「div.dropDownMenu」）。toggle（）'或'''toggle（）''或者' $（「div.dropDownMenu」）。hide（）'和'$（「div.dropDownMenu」）。show（）'應該可以從我能看到的代碼中工作。一個注意，如果只有一個菜單，最好使用它的id來引用它：'$（'＃dropDownMenu'）'。 –

標記的答案解決了主要問題，但是爲了在用戶做出選擇之後顯示/隱藏dropDownMenu元素，解決方案是使用單獨的函數在單擊元素本身時切換元素。與全部5個專輯排序功能同時隱藏dropDownMenu不同。

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

來源

2017-01-08 01:52:50 ebeck

jquery顯示和切換功能不工作

回答

相關問題