Функции jquery show и toggle не работают

Question

Чтобы быстро преподнести это, я делаю вводный курс для веб-дизайна, и нам нужно иметь базовую функцию фильтрации на нашем сайте, нам сказали использовать метод filter by class.

Для моего сайта я фильтрую обложки альбомов альбомов по жанрам, но я хочу, чтобы они могли быть в одном жанре. Код, который я написал до сих пор, скрывает все элементы обложки альбома, но не покажет только те, которые я хочу.

У меня есть некоторые комментарии для отладки, и я также попытался в одной из строк уточнить, какие divs показать i.e, которые имеют более одного класса.

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

DIV с классом 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 для решения, и другие пользователи решили ту же проблему, заменив show/hide на toggle, в то время как ни один из них не работает для меня.

Answer 1

Вопрос: у вас есть несколько атрибутов class. Вам нужно добавить все классы на одну и ту же вкладку атрибутов: class="recordElement rock metal".

Парсер html обычно использует последний атрибут имени имени, переопределяет последующие атрибуты.

Answer 2

Отмеченный ответ решает основную проблему, однако, чтобы показать/скрыть элемент dropDownMenu после того, как пользователь сделал выбор, решение должно было иметь отдельную функцию, которая переключает элемент при нажатии на элемент. В отличие от того, что все 5 функций сортировки альбома также скрывают dropDownMenu.

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