javascript - 具有相同类的容器具有单独的jquery效果

Question

好的，所以我制作了一个快速程序，当您单击一个框时会显示隐藏的文本。问题是，当您单击任何一个框时，它都会显示它们中的文本。我只希望它显示您单击的框中的文本。

Javascript：

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

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

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

    });

});

Answer 1

您需要专门访问当前元素，例如，通过this.

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

没有它，jQuery 将只查询.insidebox整个 DOM 中的任何元素。

Answer 2

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

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

});

Answer 3

使用隐式对象：

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

        $(this).fadeToggle();        

    });

})

Answer 4

你可以这样做：

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

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

      $(this).fadeToggle();        

  });

});