jquery svg paths: щелкнув путь B, проверьте, активен ли путь A, если это так, деактивируйте A и активируйте B

Question

Прежде всего, спасибо за ваш интерес. У меня есть этот SVG (карта страны), и я хочу, чтобы пользователь щелкнул область этой карты, чтобы всплыл div с информацией об этой области, и эта область (SVG) приобрела новый цвет («активный»). Если пользователь снова нажмет на эту область, он получит свое предыдущее состояние, и div будет скрыт. Пока все хорошо.

Проблема в том, что если область в данный момент «активна» (например, область A), и пользователь щелкает другую область (например, область B), обе области будут активными, и я хотел бы отключить область A.

Пока это мой код:

$(function (){
            $('.distrito').on('click', function(){
                if ( $(this).hasClass( 'distrito' ) ) {
                    $(this).removeClass('distrito').addClass('distritoIsActive');
                } else {
                    $(this).removeClass('distritoIsActive').addClass('distrito');
                }
/*this will get corresponding div to showup*/
                $('#legenda' + this.id).toggle(1000);
            });
        });

Я думаю, что мне нужно перебрать пути в поисках класса distritoIsActive, и я сделал и создал массив со всеми областями:

let $svgObject = document.getElementById('Layer_1');
let $myDistrictos = Array.from($svgObject.querySelectorAll("path"));

Но я не могу перебрать массив, поэтому приложение будет знать, есть ли класс distritoIsActive, и передаст его моей функции. Может кто-то помочь мне, пожалуйста? Заранее спасибо

Пример кода можно найти здесь: http://mapa.e -forma.pt /

Answer 1

Я добавил простую проверку в ваш код, чтобы получить то, что вы хотели. Посмотрите ниже (только часть js)

let $svgObject = document.getElementById('Layer_1');
let $myDistrictos = Array.from($svgObject.querySelectorAll("path"));
let previous = null;

/*let $redClassIsActive = false;*/
console.log($myDistrictos);

$(function (){
        $('.distrito').on('click', function(){

        if(previous === null)
        {
          $(this).removeClass('distrito').addClass('distritoIsActive');
          $('#legenda' + this.id).toggle(1000);
          previous = this;
          return;
        }



        if(previous !== null && previous.id === this.id)
        {
        previous = null;
        $(this).removeClass('distritoIsActive').addClass('distrito');
        $('#legenda' + this.id).toggle(1000);
        }
        else
        {
        $(previous).removeClass('distritoIsActive').addClass('distrito');
        $('#legenda' + previous.id).toggle(1000);
        $(this).removeClass('distrito').addClass('distritoIsActive');
        $('#legenda' + this.id).toggle(1000);
        previous = this;

        }


        });
    }); 

Счастливое кодирование