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

xghobddn 于 2023-06-22 发布在 jQuery

关注(0)|答案(3)|浏览(156)

我有一个在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>

jquery

来源：https://stackoverflow.com/questions/56307223/click-function-changing-all-elements-with-same-class-name

3条答案

按热度按时间

cbjzeqam1#

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

赞(0）回复(0）举报 2023-06-22

zaqlnxep2#

首先，你必须将你的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");
        });

赞(0）回复(0）举报 2023-06-22

sg3maiej3#

尝试使用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";
     }

赞(0）回复(0）举报 2023-06-22

我来回答

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

3条答案

相关问题

热门标签

最新问答