如何在一个选择器jQuery中显示和隐藏多个元素？ [英] How to show and hide multiple element in one selector jQuery?

问题描述

当我点击类 show_hidden_​​element 的元素时，我想显示ID hidden_​​element 当我点击ID为 close_hidden_​​element 的元素时，ID为 hidden_​​element 的元素，如果我只是制作一个我的脚本可以工作，但我有三个元素具有相同的CLASS和ID，它不能工作，有人请帮助。

i want to show the hidden element with ID hidden_element when i click the element with class show_hidden_element , and close the element with ID hidden_element when i click element with ID close_hidden_element , if i just make one my script can work fine, but i have three element with same CLASS and ID, it cant work, somebody please help.

这是我的脚本

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

my jQuery Script

my jQuery Script is

    $(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。

The difference between id and class is that id is unique, class is not. Also an element may have multiple classes, but unique 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应该是

And your jquery should be.

$(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/

这篇关于如何在一个选择器jQuery中显示和隐藏多个元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！