Jquery не обходится методом next () - PullRequest
Новая
       26

Jquery не обходится методом next ()

0 голосов
/ 02 марта 2020

У меня есть обработчик события click, который добавляет класс «active» к разделу тела при запуске. проблема в том, что если я нажимаю на текущую кнопку, она добавляет «активный» к следующему узлу вместо текущего. Таким образом, «активный» класс должен чередоваться при нажатии текущей кнопки в каждом наборе. 

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

1 Ответ

0 голосов
/ 02 марта 2020

Когда вы нажимаете кнопку, вы можете использовать $(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")
              }
          });
}
...