Jquery 不使用 next() 方法遍历

Posted 2023-02-25

【中文标题】Jquery 不使用 next() 方法遍历

【英文标题】：Jquery not Traversing with next() method

【发布时间】：2020-03-01 22:41:19

【问题描述】：

我有一个单击事件处理程序，它在触发时将“活动”类添加到正文部分。 问题是如果我单击当前按钮，它会将“活动”添加到下一个节点而不是当前节点。因此，当在每个集合中单击当前按钮时，“活动”类应该交替出现。

$($contentBodyBtn).click(function()
    if($(this).hasClass("btn-active"))
        $(".fad-physician-profile-card-feinstein__column-wrapper").removeClass("active")
    else
        $(".fad-physician-profile-card-feinstein__column-wrapper").next().addClass("active")
    
);

如果在第一个索引节点上单击按钮，则第二个索引节点获得“活动”类，当单击每个索引中的按钮时，它应该交替。

错误行为：

<div id="index0" class="col-sm-9 fad-physician-profile-card-feinstein__column-wrapper"> 
<div id="index1" class="col-sm-9 fad-physician-profile-card-feinstein__column-wrapper active">

预期行为：

<div id="index0" class="col-sm-9 fad-physician-profile-card-feinstein__column-wrapper active"> 
<div id="index1" class="col-sm-9 fad-physician-profile-card-feinstein__column-wrapper"> 

查看实时代码笔：https://codepen.io/paul-solomon/pen/LYVpZvq?editors=1010

【问题讨论】：

你能再解释一下吗？还有什么是 $contentBodyBtn？

您在每个部分都有一个按钮，并且您希望每个按钮切换 THAT SECTIONS 活动类？相反，该按钮切换下一部分活动类？

right $contentBodyBtn = $(".fad-btn__toggle")，当它在每个部分中单击时，活动类在每个部分中单击时应该交替。在 codepen 示例中，它不会交替出现。

【参考方案1】：

当您单击按钮时，您可以使用$(this).closest(". ..") 查找要添加或删除active 类的父元素（在本例中为fad-physician-profile-card-feinstein__column-wrapper）。这样，当您单击按钮时，它总是会向该父级添加/删除活动类only。

if($contentBody.length >= 0)
           $($contentBodyBtn).click(function()
              if($(this).hasClass("btn-active"))
                $(this).removeClass("btn-active");
                $(this).text("View more");
                $(this).next($contentBodyArrow).removeClass("caret-up");
                $(this).closest(".fad-physician-profile-card-feinstein__column-wrapper").removeClass("active")
              else
                $(this).addClass("btn-active");
                $(this).text("View less");
                $(this).next($contentBodyArrow).addClass("caret-up")
                $(this).closest(".fad-physician-profile-card-feinstein__column-wrapper").addClass("active")
              
          );