时间戳

首页 > 解决方案 > jquery svg 路径：单击路径 B 检查路径 A 当前是否处于活动状态，如果是，则停用 A 并激活 B

javascript - jquery svg 路径：单击路径 B 检查路径 A 当前是否处于活动状态，如果是，则停用 A 并激活 B

问题描述

首先，感谢您的关注。我有这个 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/

标签： javascriptjqueryloopssvgpath

解决方案

我在你的代码中添加了一个简单的检查来得到你想要的。看看下面（只是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;

        }


        });
    });

快乐编码

推荐阅读