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

Question

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

实际情况是这样的：当我点击一张图片时，所有块的'.post-text'立即打开。我只需要打开我单击的那个。我已经尝试了您在下面看到的内容和查找功能，但它不起作用。请帮助我。

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

Answer 1

您可以使用类

但是你将需要一些遍历

假设您的 .post-文本 是图像

之后的下一个 div

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

see jquery next() | find() | parent()

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>

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

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

JQuery's toggle function is affecting too many elements