javascript - 单击功能更改具有相同类名的所有元素

Question

我有一个具有相同类名的 div，它在 php 循环中迭代。每当单击 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

将 this 与 .next() 和 .prev() 方法一起使用:

  $(".more-detail").click(function(){
    $(this).next(".detail-section").css("display", "block");
    $(this).next(".less-detail").css("display", "block");
    $(this).css("display", "none");
  });

  $(".less-detail").click(function(){
    $(this).prev(".detail-section").css("display", "block");
    $(this).prev(".more-detail").css("display", "block");
    $(this).css("display", "none");
  });