单击函数更改具有相同类名的所有元素

Question

我有一个在 php 循环中迭代的具有相同类名的 div。每当点击 more 链接时，所有 class='detail-section' 的 div 都会打开和关闭，而不仅仅是循环中选择的特定 div。我试过 $(this).closest 并且它似乎没有改变任何东西。要么是因为它不接近或什么的。我想不通。任何帮助是极大的赞赏。

foreach($rows as $a => $b){

  <div><a class='more-detail' style='cursor: pointer; font-color:#0000ff;'>More...</a></div>

  <div class='detail-section' style='display: none;'> 

     <!--Content-->

  </div>

  <div><a class='less-detail' style='cursor: pointer; font-color:#0000ff;'>Less...</a></div>

}

这是我的脚本

<script>

$(document).ready(function(){

  $(".more-detail").click(function(){

    $(".detail-section").css("display", "block");

    $(".more-detail").css("display", "none");

    $(".less-detail").css("display", "block");

  });

  $(".less-detail").click(function(){

    $(".detail-section").css("display", "none");

    $(".more-detail").css("display", "block");

    $(".less-detail").css("display", "none");

  });

});

</script>

Answer 1

首先，您必须将 html div 更改为以下几行：<div>&nbsp; <a class='more-detail' style='cursor: pointer; font-color:#0000ff;'>More...</a>&nbsp; &nbsp; <div class='detail-section' style='display: none;'>&nbsp; &nbsp; &nbsp; &nbsp; details details details details details details details details details details&nbsp;&nbsp; &nbsp; </div>&nbsp; &nbsp; <a class='less-detail' style='cursor: pointer; font-color:#0000ff;'>Less...</a></div>然后将您的 jquery 更改为：&nbsp; &nbsp; &nbsp; &nbsp;$(".more-detail").click(function(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var $this = $(this);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var $detail = $this.next(".detail-section");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var $lessDetail = $detail.next(".less-detail");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $this.css("display", "none");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $detail.css("display", "block");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $lessDetail.css("display", "block");&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; $(".less-detail").click(function(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var $this = $(this);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var $detail = $this.prev(".detail-section");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var $moreDetails = $detail.prev(".more-detail");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $detail.css("display", "none");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $moreDetails.css("display", "block");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $this.css("display", "none");&nbsp; &nbsp; &nbsp; &nbsp; });

Answer 2

使用this与.next()和.prev()方法：&nbsp; $(".more-detail").click(function(){&nbsp; &nbsp; $(this).next(".detail-section").css("display", "block");&nbsp; &nbsp; $(this).next(".less-detail").css("display", "block");&nbsp; &nbsp; $(this).css("display", "none");&nbsp; });&nbsp; $(".less-detail").click(function(){&nbsp; &nbsp; $(this).prev(".detail-section").css("display", "block");&nbsp; &nbsp; $(this).prev(".more-detail").css("display", "block");&nbsp; &nbsp; $(this).css("display", "none");&nbsp; });