javascript - 1つのセレクターjQueryで複数の要素を表示および非表示にする方法は?

Question

hidden_elementclass の要素をクリックすると ID の非表示の要素を表示し、IDの要素をクリックするshow_hidden_elementと ID の要素を閉じhidden_elementますclose_hidden_element。スクリプトを 1 つだけ作成すると、スクリプトは正常に動作しますが、同じ CLASS の要素が 3 つあり、 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

ページ上の要素には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">&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();
    });
});

Answer 2

複数の要素に同じ 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();
});