Question

我有一个click事件处理程序，可以在触发时向主体部分添加“活动”类。问题是，如果我单击当前按钮，它将“活动”添加到下一个节点而不是当前节点。因此，在每组中单击当前按钮时，“活动”类应交替显示。

$($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

Answer 1

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

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

jQuery无法使用next（）方法遍历

1 个答案: