JQuery добавить класс, если соответствующий элемент имеет класс «активный» (пытается упростить мой код)

Question

Пожалуйста, помогите - должен быть лучший способ сделать это! Итак, в основном, в SVG у меня есть набор элементов с именами классов 1 - 50. И затем набор соответствующих элементов с идентификаторами 1 - 50. В двух словах - если круг 1 имеет класс hotspot-active, то путь 1 должен иметь class locator-active и т. Д.

Мой код работает, но я действительно не хочу писать 50 операторов if! Я уверен, что это можно сделать с массивами, но мой Jquery просто недостаточно хорош. Любая помощь будет высоко ценится. Вот небольшой пример кода от 1 до 3 -

$(document).ready(function(){

if ($('.1').hasClass('hotspot-active') ) {
$('#1').addClass('locator-active');
}

});

$(document).ready(function(){

if ($('.2').hasClass('hotspot-active') ) {
$('#2').addClass('locator-active');
}

});

$(document).ready(function(){

if ($('.3').hasClass('hotspot-active') ) {
$('#3').addClass('locator-active');
}

});

И HTML будет выглядеть примерно так -

<circle class="1" cx="1078.34" cy="656.84" r="12.75"/>
<circle class="2" cx="1547.13" cy="613.3" r="12.75"/>
<circle class="3 hotspot-active" cx="1578.15" cy="221.17" r="12.75"/>

<path id="1" />
<path id="2" />
<path id="3" />

Answer 1

Вы можете взять номер / идентификатор из «активного» круга, чтобы затем найти и «активировать» соответствующий путь:

const hotspot = document.querySelector(".hotspot-active");
const id = Array.from(hotspot.classList).find(Number);

if (id) {               
  document.getElementById(id).classList.add("locator-active");
}

Но ... Это работает правильно, только если первое число, найденное в .classList, является идентификатором соответствующего элемента пути

Пример:

$(function() {
  randomHotspot();

  const hotspot = document.querySelector(".hotspot-active");
  const id = Array.from(hotspot.classList).find(Number);
  
  if (id) {               
    document.getElementById(id).classList.add("locator-active");
  }
});

function randomHotspot() {
  const possibleHotspots = document.querySelectorAll("div"),
        idx = ~~(Math.random() * 3);
  
  possibleHotspots[idx].classList.add("hotspot-active");
}

div.hotspot-active { border: solid 2px red }
p.locator-active { border: solid 2px green }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="1">1</div>
<div class="2">2</div>
<div class="3">3</div>

<p id="1">Path 1</p>
<p id="2">Path 2</p>
<p id="3">Path 3</p>

Answer 2

Вы можете использовать для

$(document).ready(function(){
    const circlesCount = document.querySelectorAll('circle').length;
    for (let i = 1; i <= circlesCount; i++) {
      if ($('.' + i).hasClass('hotspot-active') ) {
        $('#' + i).addClass('locator-active');
      }
    }
});