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;

        }


        });
    });

快乐编码

jQuery svg路径：点击路径B，检查路径A当前是否处于活动状态，如果是，则停用它并激活B

1 个答案: