單擊功能更改具有相同類名的所有元素

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

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");
  });

Answer 2

首先，您必須將 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 3

嘗試使用 javascript 而不是 PHP 來實現。

document.getElementsByClassName('more-detail').onclick = function(){
      document.getElementsByClassName('detail-section').style.display = "block";
      document.getElementsByClassName('more-detail').style.display = "none";
     document.getElementsByClassName('less-detail').style.display = "block";
     }
document.getElementsByClassName('less-detail').onclick = function(){
      document.getElementsByClassName('detail-section').style.display = "none";
      document.getElementsByClassName('more-detail').style.display = "block";
     document.getElementsByClassName('less-detail').style.display = "none";
     }