jQuery事件目标/相关目标问题

Question

我正在尝试在单击标题元素时显示DB数据。数据基本上是在点击时切换的。我做了一个jQuery来处理同样的问题。作为一个新手，我无法弄清楚这个问题。有谁能解释一下吗？

单击查看注释后，我希望查看该特定图片的注释。

jQuery：

<script>
   $('#headingone').click(function(event){
   event.preventDefault();
   var b = $(event.target)
   b.find('.menu').toggle("slide")
  })
</script>

HTML：

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

Answer 1

您只需从单击的标题元素中获取data-target属性的值。这段代码应该能做到这点：

​

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

           <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
            <h5 id="headingone" data-target=".menu">View Comments</h5>
            <div class="menu">
              {% for i in item.piccomments.all %}
                <p id="paratwo" style="margin:0px;"><strong>{{i.author}}</strong> said "{{i.text}}"</p>
              {% endfor %}
            </div>

​

我希望它能帮上忙

Answer 2

这里使用的是.find()，它搜索子元素。在这个场景中，我将使用this获取被单击的元素，并使用.siblings()或.next()从那里遍历

​

 $('#headingone').click(function() {
   $(this).siblings('.menu').toggle("slide");
 })

.menu {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h5 id="headingone" data-target=".menu">View Comments</h5>
<div class="menu">
  <p id="paratwo" style="margin:0px;"><strong>{{i.author}}</strong> said "{{i.text}}"</p>
</div>

​

如果#headingone不是链接、按钮或表单元素，则这里不一定需要event.preventDefault();。