jquery 显示和切换功能不起作用

Question

为了快速介绍这一点，我正在学习一个网页设计介绍课程，我们需要在我们的网站上有一个基本的过滤器功能，我们被告知要通过 class 方法使用过滤器。

对于我的网站，我按流派过滤音乐专辑封面，但我希望它们都属于同一流派。到目前为止我编写的代码可以隐藏所有专辑封面元素，但不会只显示我想要的。

我有一些评论用于调试，我也尝试在其中一行中更具体地说明要显示的 div 的内容，即具有多个 class.[= 的内容13=]

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

带有 class 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>

会不会是我试图对具有多个 class 的元素执行此操作？我尝试使用谷歌搜索解决方案，其他用户通过将 show/hide 替换为 toggle 解决了同样的问题，但两者都不适合我。

Answer 1

问题是您有多个 class 属性。您需要将所有类添加到同一个属性选项卡，如下所示：class="recordElement rock metal".

html 解析器通常使用给定名称的最后一个属性，覆盖后续属性。

Answer 2

标记的答案解决了主要问题，但是为了在用户做出选择后 show/hide dropDownMenu 元素，解决方案是有一个单独的函数，当元素本身被点击时切换元素. 与隐藏 dropDownMenu 的所有 5 个相册排序功能相反。

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

jquery 显示和切换功能不起作用

jquery show and toggle functions not working

html

jquery

toggle