javascript - 別々のjquery効果を持つ同じクラスのコンテナ

Question

わかりましたので、ボックスをクリックすると非表示のテキストが表示される簡単なプログラムを作成しました。問題は、どちらかのボックスをクリックすると、両方のボックスにテキストが表示されることです。クリックしたボックスのテキストのみを表示したい.

Javascript:

$(document).ready(function(){
    $('.insidebox').hide ();

    $('.box').on('click', function(){

        $('.insidebox').fadeToggle();        

    });

});

Answer 1

たとえば、を介して、現在の要素に具体的にアクセスする必要がありますthis。

$( this ).find( '.insidebox' ).fadeToggle();

それがなければ、jQuery は.insideboxDOM 全体内の任意の要素を照会するだけです。

Answer 2

 $(".box").on("click", function(){

    $(this).children(".insidebox").fadeToggle();        

});

Answer 3

暗黙的なオブジェクトを使用します。

$(document).ready(function(){
    $('.box').on('click', function(){

        $(this).fadeToggle();        

    });

})