Добавьте класс, если у другого элемента есть активный класс, и удалите его, если нет, с помощью javascript / JQuery

Question

Я пытаюсь добавить класс в div, если у другого элемента на странице есть активный класс. Я хотел бы добавить класс «раскрытия» к определенному c div, если один элемент svg имеет активный класс. Он работает вручную с HTML, но я не могу активировать свой класс «раскрытия» динамическим c способом, если я изменяю активный класс в другом элементе. Мне удалось изменить активный класс, но это не повлияло на мой элемент div ... Любое предложение приветствуется, и я прошу прощения за мой английский sh ...

Вот мой HTML:

<svg>
   <g class="region dep28"> <!-- I can for exemple, manually put "active" class here and it 
    triggers the "reveal" class lower -->
    <path class="st0"/>
   </g>
   <g class="region dep45">
    <path class="st1"/>
   </g>
</svg>
<div class="clublist club28"> <!-- Has "reveal" if I put manually "active" class upper --> ..... </div>
<div class="clublist club45">
 .....
</div>`

Вот мой JavaScript:

$(".region").click(function () {
  $(".region").removeClass("active");
  $(this).addClass("active");   
});


if ( $(".dep28").hasClass('active') ) {

    $(".club28").addClass("reveal");   
} else {  $(".club28").removeClass("reveal");
}

Итак, я хотел бы добавить класс «раскрытия» в .club45, если у меня есть активный класс на .dep45 ...

Еще раз прошу прощения за мой engli sh ...

Спасибо!

Answer 1

Это должно сработать, если вы переместите оператор if-else в функцию щелчка, поскольку раскрытие не запускается, поскольку оно не находится в той же функции.

$(".region").click(function () {

  $(".region").removeClass("active");
  $(this).addClass("active");   

  //Retrieve class names
  var classNames = $(this).attr('class').split(/\s+/)

  //Get the dep+id
  var depClass = classNames[1]; //dep28

  //Retrieve the id
  var id = depClass.split('dep')[1];

  //This if-else statement has been moved inside the click function
  if ($(".dep" + id).hasClass('active')) {
    $(".club" + id).addClass("reveal");   
  } 
  else {  
    $(".club" + id).removeClass("reveal");
  }

});