如何在一个选择器jQuery中显示和隐藏多个元素

How to show and hide multiple element in one selector jQuery?

本文关键字：显示 隐藏 元素 jQuery 一个 选择器      更新时间：2023-09-26
我想

在单击具有类show_hidden_element的元素时显示带有 ID hidden_element 的隐藏元素，并在单击带有 ID close_hidden_element 的元素时关闭带有 ID hidden_element 的元素，如果我只做一个，我的脚本可以正常工作，但我有三个具有相同 CLASS 和 ID 的元素， 它不起作用，有人请帮忙。

这是我的脚本

 <article class="post show_hidden_element">
    <div id="hidden_element">
        <div class="read_box">
            <div class="read_box_content">
                <h2 class="title">Lorem Ipsum</h2>
                <a id="close_hidden_element" class="button_close">&times;</a>
            </div>
        </div>
    </div>
    <div class="border"></div>
</article>
<article class="post show_hidden_element">
    <div id="hidden_element">
        <div class="read_box">
            <div class="read_box_content">
                <h2 class="title">Lorem Ipsum</h2>
                <a id="close_hidden_element" class="button_close">&times;</a>
            </div>
        </div>
    </div>
    <div class="border"></div>
</article>
<article class="post show_hidden_element">
    <div id="hidden_element">
        <div class="read_box">
            <div class="read_box_content">
                <h2 class="title">Lorem Ipsum</h2>
                <a id="close_hidden_element" class="button_close">&times;</a>
            </div>
        </div>
    </div>
    <div class="border"></div>
</article>

我的jQuery脚本是

    $(this).find(".show_hidden_element").click( function(){
        $(this).find("#hidden_element").show();
    });
    $(this).find("#close_hidden_element").click( function(){
        $(this).find("#hidden_element").hide();
    });

id 和 class 之间的区别在于 id 是唯一的，类不是。此外，一个元素可以有多个类，但 id 是唯一的。

使用 class="close_hidden_element button_close" 。

<article class="post show_hidden_element">
    <div class="hidden_element">
        <div class="read_box">
            <div class="read_box_content">
                <h2 class="title">Lorem Ipsum</h2>
                <a class="close_hidden_element button_close">&times;</a>
            </div>
        </div>
    </div>
    <div class="border"></div>
</article>
<article class="post show_hidden_element">
    <div class="hidden_element">
        <div class="read_box">
            <div class="read_box_content">
                <h2 class="title">Lorem Ipsum</h2>
                <a class="close_hidden_element button_close">&times;</a>
            </div>
        </div>
    </div>
    <div class="border"></div>
</article>
<article class="post show_hidden_element">
    <div class="hidden_element">
        <div class="read_box">
            <div class="read_box_content">
                <h2 class="title">Lorem Ipsum</h2>
                <a class="close_hidden_element button_close">&times;</a>
            </div>
        </div>
    </div>
    <div class="border"></div>
</article>

你的jquery应该是。

$(document).on('click', 'div.show_hidden_element',function(){
    $(".hidden_element").show();
});
$(document).on('click', 'div.close_hidden_element',function(){
    $(".hidden_element").hide();
});

建议：阅读此 http://css-tricks.com/the-difference-between-id-and-class/

页面上的

元素必须具有唯一 ID。如果您希望此功能正常工作，则需要将它们更改为类。您是否希望每个<article>仅通过各自的触发器隐藏/显示？

 <article class="post show_hidden_element">
    <div class="hidden_element">
        <div class="read_box">
            <div class="read_box_content">
                <h2 class="title">Lorem Ipsum</h2>
                <a class="close_hidden_element" class="button_close">&times;</a>
            </div>
        </div>
    </div>
    <div class="border"></div>
</article>
<article class="post show_hidden_element">
    <div class="hidden_element">
        <div class="read_box">
            <div class="read_box_content">
                <h2 class="title">Lorem Ipsum</h2>
                <a class="close_hidden_element" class="button_close">&times;</a>
            </div>
        </div>
    </div>
    <div class="border"></div>
</article>
<article class="post show_hidden_element">
    <div class="hidden_element">
        <div class="read_box">
            <div class="read_box_content">
                <h2 class="title">Lorem Ipsum</h2>
                <a class="close_hidden_element" class="button_close">&times;</a>
            </div>
        </div>
    </div>
    <div class="border"></div>
</article>

jQuery

$("article").on("click",".show_hidden_element",function(){
    $(this).find(".hidden_element").show();
});
$("article").on("click",".close_hidden_element",function(){
    $(this).closest(".hidden_element").hide();
});

实际上，由于show_hidden_element类的位置，这不太正确。最好将<a close="close_hidden_element" class="button_close">&times;</a>设置为切换，如下所示：

<article class="post show_hidden_element">
    <div class="hidden_element">
        <div class="read_box">
            <div class="read_box_content">
                 <h2 class="title">Lorem Ipsum</h2>
 <a class="close_hidden_element" class="button_close">&times;</a>
            </div>
        </div>
    </div>
</article>
$(function () {
    $("article").on("click", ".close_hidden_element", function () {
        $(".hidden_element").toggle();
    });
});

多个元素不能使用相同的 id。您必须将所有id="hidden_element"(以及其他(的id转换为类，然后使用类似的东西。

<article class="post show_hidden_element">
    <div class="hidden_element">
        <div class="read_box">
            <div class="read_box_content">
                <h2 class="title">Lorem Ipsum</h2>
                <a id="close_hidden_element1" class="button_close">&times;</a>
            </div>
        </div>
    </div>
    <div class="border"></div>
</article>
<article class="post show_hidden_element">
    <div class="hidden_element">
        <div class="read_box">
            <div class="read_box_content">
                <h2 class="title">Lorem Ipsum</h2>
                <a id="close_hidden_element2" class="button_close">&times;</a>
            </div>
        </div>
    </div>
    <div class="border"></div>
</article>
<article class="post show_hidden_element">
    <div class="hidden_element">
        <div class="read_box">
            <div class="read_box_content">
                <h2 class="title">Lorem Ipsum</h2>
                <a id="close_hidden_element3" class="button_close">&times;</a>
            </div>
        </div>
    </div>
    <div class="border"></div>
</article>

jquery

$(".show_hidden_element").click( function(){
    $(this).find(".hidden_element").show();
});
$(".button_close").click( function(){
    $(this).closest(".hidden_element").hide();
});
相关文章：