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：

HTML（树枝文件）

<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");
});

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

2 个答案: