JQuery的切换功能正在影响太多的元素

Question

这是应该发生的事情：当我点击图像'.post-text'应该出现时，然后 - 当我再次点击图像时 - 图像消失。所有这些都发生在切换功能中，但我在这里简化了它。

这就是实际发生的情况：当我点击一个图像时，立即打开所有块的'.post-text'。我需要它只打开我点击的那个。我已经尝试了你在下面看到的和find函数，但它不起作用。请帮帮我。

 $( ".down-text img" ).click(function() {
        $(".post-text" ).toggle( "slow" );
});

Answer 1

您可以使用课程

但是你需要一些遍历

假设 .post-text 是图片后面的下一个div

 $( ".down-text img" ).click(function() {
      $(this).next(".post-text" ).toggle( "slow" );
  });

  

请参阅jquery next（） | find（） |的父（）

     

https://api.jquery.com/next/

     

https://api.jquery.com/parent/

     

https://api.jquery.com/find/

Answer 2

您应该使用$(this)定位您刚刚点击的元素：

$( ".down-text img" ).click(function() {
  $(this).find(".post-text" ).toggle( "slow" );
});

Answer 3

数据属性可以在这里提供帮助。

如果您将名为 text 的数据属性添加到HTML图片元素：

<img data-text="text1"/>

与文本元素匹配：

<div class="post-text" data-text="text1">Here is some text</div>

然后，您可以使用该信息仅打开正确的文本元素，而不是共享同一个类的所有元素：

$('.down-text img').click(function () {
    var id = $(this).data('text');
    $('.post-text[data-text="' + id + '"]').toggle("slow");
});

DEMO