Question

通过网络上的教程，我以某种方式从准备好的SVG文件中找出了一个交互式地图。

它显示了免费，保留或出售的房屋，并且它连接到wordpress中的高级自定义字段以更改其状态（这就是我使用[短代码]的原因）。当房子空闲时，它突出显示（悬停）绿色，卖出=红色，保留=橙色。

一切都很完美，但...... 我想创建一个按钮，将所有出售或保留的房屋变黑，只留下可用的房屋。

我会缩短大部分代码并向您展示我尝试这项工作的方法。

首先：具有SVG路径和属性的数组：

 var path = svg.path("M 2163.333,524.667 ... 2169.333,454.667 z");
 path.data('id', 'c1');
 path.data('status', '[statusdc1]');   //////////THIS IS THE DATA I WANT TO GET
 map['c1'] = path;

var path = svg.path("M 2076,546.062 ... 2208.952,618.538 z");
 path.data('id', 'c2');
 path.data('status', '[statusdc2]');   //////////THIS IS THE DATA I WANT TO GET
 map['c2'] = path;

每个路径都有两个向用户显示的图层：路径本身和名称（这样您就可以理解该索引是什么 map [key] [0] 和 map [key ] [1] 以后）

for (var key in map) {          
    map[key][0].attr({
        'fill': '#fff',
        'opacity' : 0.05,
        'stroke' : '#fff',
        'stroke-width' : 2
    });            

    map[key][1].attr({
        'fill': '#fff',
        'opacity' : 0
        });
}

然后是悬停效果：

map[key].mouseover(function(e) {        
        if (this != activeElement) {

            if(this[0].data('id')=="c1"){
                    if(this[0].data('status')=="sold"){             
                        this[0].animate({
                            'fill': '#c80000',
                            'opacity' : 0.6,
                            'stroke' : '#c80000',
                            'stroke-width' : 2
                        }, 500);
                    }else if(this[0].data('status')=="free"){
                            this[0].animate({
                            'fill': '#A2E22D',
                            'opacity' : 0.6,
                            'stroke' : '#A2E22D',
                            'stroke-width' : 2
                        }, 500);
                    }else{
                            this[0].animate({
                            'fill': '#FFD700',
                            'opacity' : 0.6,
                            'stroke' : '#FFD700',
                            'stroke-width' : 2
                        }, 500);                        
                    }
                    $( ttc1 ).css( "opacity", 1 ); 
            }else if(this[0].data('id')=="c2"){
                    $( ttc2 ).css( "opacity", 1 ); 
                    if(testc2=="sold"){             
                        this[0].animate({
                            'fill': '#c80000',
                            'opacity' : 0.6,
                            'stroke' : '#c80000',
                            'stroke-width' : 2
                        }, 500);
                    }else if(testc2=="free"){
                            this[0].animate({
                            'fill': '#A2E22D',
                            'opacity' : 0.6,
                            'stroke' : '#A2E22D',
                            'stroke-width' : 2
                        }, 500);
                    }else{
                            this[0].animate({
                            'fill': '#FFD700',
                            'opacity' : 0.6,
                            'stroke' : '#FFD700',
                            'stroke-width' : 2
                        }, 500);                        
                    }

每个房子的代码都在继续。（我知道可以在没有这么多重复的情况下完成，但这不是问题所在。一切正常。现在问题是：

通过THIS选择器调用其参数，我看到当你处理单个（悬停在）对象时，事情是如何工作的。

如何通过每个房子的数组// map [key]来获取for循环中的那些参数（状态）？这是我的尝试。

var btnstatus=2;

        document.getElementById("btn-check").onclick = function() {checkAvailable()};

    function checkAvailable() {

for (var key in map) {   
            if (btnstatus % 2 != 0){
                if(map[key].data('status')!=="free"){   
                    map[key][0].animate({
                        'fill': '#fff',
                        'opacity' : 0.05
                    }, 500);
                }
            }else{
                if(map[key].data('status')!=="free"){   
                    map[key][0].animate({
                        'fill': '#000000',
                        'opacity' : 0.6
                    }, 500);
                }
            }


    }
btnstatus+=1;
}

它会对每个可能的路径（不仅是那些已售出或保留的路径）进行着色/取消遮蔽，因为参数返回未定义。我该如何在循环中获得所需的状态？：）

我是JS基础知识的平面设计师，我知道这可能就像字母表一样简单。然而 - 没有经验，缺乏知识 - 请帮助。抱歉任何语言错误;）迎接！

Answer 1

好吧，显然我正在寻找的.data没有保存到map [key]中，而是保存在包含SVG路径的内部数组映射[key] [0]中。这是保存所有.data的地方。

if(map[key][0].data('status')!=="free"){

是我想要的。感谢所有走过的人。

JS访问数组中的数据

1 个答案: