Question

对于宠物项目，我为用户提供了一种对上传的图片发表评论的方法。现在使用jQuery，在单击视图注释时，我将显示和隐藏注释。但是，该功能仅适用于列表中的第一张图片，而不适用于其余图片。

我阅读了有关使用每个函数的信息，然后使用this为每个元素调用了click。但是，这也不起作用。有人可以纠正我吗？

HTML：

     <div id="show">
         <h6>View Comments</h6>
        </div>
        <div id="menu" style="display:none;">
          {% for i in item.piccomments.all %}
            <p style="margin:0;"><strong>{{i.author}}</strong> said "{{i.text}}"</p>
          {% endfor %}
          </div>

JQUERY：

$(document).ready(function(){
$('#show').click(function() {
  console.log('clicked');
  $('#menu').each(function(){
    $(this).toggle("slide");
  });
});
});

Answer 1

我建议将show变成一个类，并将隐藏的注释嵌入同一div中，以便您可以使用jquery轻松选择它。例如。

<div class="show">
         <h6>View Comments</h6>
  <div class="menu" style="display:none;">
          {% for i in item.piccomments.all %}
            <p style="margin:0;"><strong>{{i.author}}</strong> said "{{i.text}}"</p>
          {% endfor %}
          </div>
        </div>

还有您的JQUERY：

$(document).ready(function(){
$(document).on('click', '.show', function() {     
    $(this).find('.menu').toggle("slide"); //Look for child menu option
});
});

正如您在上面的注释中看到的，重要的是，页面上永远不要有具有相同ID的元素。它将导致您遇到的问题。

查找很有用，因为它仅在父容器中向下搜索。因此，在此示例中，它正在“ show” div中查找类名称为“ menu”的元素。

jQuery单击操作不适用于所有迭代项

1 个答案: