Question

当我点击带有hidden_element类的元素时，我希望显示ID为show_hidden_element的隐藏元素，当我点击ID为{{1}的元素时，我会关闭ID为hidden_element的元素如果我只做一个我的脚本可以正常工作，但我有三个元素具有相同的CLASS和ID，它不能工作，有人请帮助。

这是我的剧本

close_hidden_element

我的jQuery脚本是

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

Answer 1

网页上的元素必须包含 UNIQUE 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">×</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();
    });
});

Answer 2

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/

Answer 3

您不能为多个元素使用相同的ID。您必须将id转换为所有id =＆＃34; hidden_element＆＃34;（以及其他人）的类，然后使用类似的内容。

<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();
});

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

3 个答案: