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

Question

我想在单击类为 show_hidden_​​element 的元素时显示 ID 为 hidden_​​element 的隐藏元素，并关闭 ID 为 hidden_​​element 的元素当我单击 ID 为 close_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();
    });

Answer 1

id 和class 的区别在于id 是唯一的，class 不是。此外，一个元素可能有多个类，但 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/