所有图片对象的jQuery点击事件触发器

Question

对于我的项目，我试图通过单击每个图片下的查看注释来显示图片注释。问题是，当我点击查看一张图片的评论时，它会触发并打开所有图片的查看评论部分。有人能帮上忙吗！

jQuery：

$('.headingone').click(function(event){
  event.preventDefault();
  var b = $(this).attr("data-target");
  $(b).toggle("slide");
});

HTML：

<h5 href="" class="headingone"  data-target=".menu">View Comments</h5>
<div class="menu" data-id="{{item.pk}}" style="display:none">
  {% for i in item.piccomments.all %}
    <p class="paratwo" style="margin:0px;"><strong>{{i.author}}</strong> said "{{i.text}}"</p>
  {% endfor %}
</div>

Answer 1

您的data-target正在指向一个类。我想每个菜单都有相同的类。

尝试：

 $('.headingone').click(function(){
    $(this).next().toggle("slide");
 });

Answer 2

luSchink发布的内容是正确的:如果你指向一个类，它将打开与该类相关的所有评论。然而，只有当您的类为".menu“的注释始终是下一个元素时(在本例中)，此解决方案才有效。

如果在注释前面有其他兄弟，则$(this).next()将不起作用。例如：

<h5 href="" class="headingone"  data-target=".menu">View Comments</h5>
<div class="another-sibling> </div>
<img class="another-sibling" src="/img/another-sibling-2.png">
<div class="menu" data-id="{{item.pk}}" style="display:none">
  {% for i in item.piccomments.all %}
    <p class="paratwo" style="margin:0px;"><strong>{{i.author}}</strong> said "{{i.text}}"</p>
</div>

通过假设{{item.pk}}是主键，我们可以将其视为一个ID。另一个在不更改jquery函数目标的情况下始终有效的解决方案是将-更改为带有注释的菜单的id：

超文本标记语言(细枝文件)

<h5 href="" class="headingone"  data-target="#{{item.pk}}">View Comments</h5>
<div class="menu" data-id="{{item.pk}}" id="{{item.pk}}" style="display:none">
{% for i in item.piccomments.all %}
  <p class="paratwo" style="margin:0px;"><strong>{{i.author}}</strong> 
           said "{{i.text}}"
  </p>
{% endfor %}
</div>

JS

$('.headingone').click(function(event){
  event.preventDefault();
  var b = $(this).attr("data-target");
  $(b).toggle("slide");
});