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

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>

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

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

        details details details details details details details details details details 

    </div>

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

</div>

然后将您的 jquery 更改为：

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

            var $this = $(this);

            var $detail = $this.next(".detail-section");

            var $lessDetail = $detail.next(".less-detail");

            $this.css("display", "none");

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

            $lessDetail.css("display", "block");

        });

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

            var $this = $(this);

            var $detail = $this.prev(".detail-section");

            var $moreDetails = $detail.prev(".more-detail");

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

            $moreDetails.css("display", "block");

            $this.css("display", "none");

        });

Answer 2

使用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");

  });