Question

我不确定如何选择我的div class =“Repors_comments_form”。在这里看起来如何

<div>
  <span onclick ="$('.Reports_comments_form').toggle();"  style="cursor:pointer">Report</span>
</div>
<div class="Reports_comments_form">
</div><!-- End of div Reports_form -->

重要的是要注意这是一个循环，可以有很多评论，只想下一个。我尝试了很多方法，但我能做的就是抓住所有类元素。

我试过

<span onclick ="$('.Reports_comments_form').toggle();"
<span onclick ="$('.Reports_comments_form').toggle().next();"
<span onclick ="$('.Reports_comments_form').next().toggle();"
<span onclick ="$('.Reports_comments_form').closest('div').next().toggle();"

Answer 1

保持行为一致而不会弄乱parent()链：

<强>标记：

<div>
    <a href="#" data-target="someId" class="reportButton">Report</a>
</div>
<div id="someId" class="report">

      // you'll be generating the id in the loop, e.g. 'report-12', 'report-13' and so on

</div>

<强> JS：

$('.reportButton').click(function(e){

    e.preventDefault()

    $('#' + $(this).data('target') ).toggle()

})

Answer 2

<div>
  <span onclick ="$(this).parent().next().toggle();"  style="cursor:pointer">Report</span>
</div>
<div class="Reports_comments_form">
    adadadads
</div>

Answer 3

如果在span中添加一个类，则可以完全删除内联脚本并使用不显眼的jQuery clcik处理程序：

HTML

<div>
  <span class="reportButton" style="cursor:pointer">Report</span>
</div>
<div class="Reports_comments_form">

JS

 /* uses next() assuming you may have this button and report sequence in page multiple times*/
$(function(){
    $('.reportButton').click(function(){
              $(this).parent().next().toggle();
    })
})

如果在页面加载后动态添加按钮，则可以使用on()

委派clcik处理程序

Answer 4

<span onclick ="$(this).parent().next('.Reports_comments_form').toggle();"

一个类的JQuery选择器，但只有下一个项目

4 个答案: