JS访问数组中的数据

Question

通过在网上找到的教程，我以某种方式从准备好的 SVG 文件中制作了交互式地图。

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

一切正常，但... 我想创建一个按钮，将所有已售出或保留的房屋涂黑，只留下可用的房屋。

我将缩短大部分代码并向您展示我为完成这项工作所做的尝试。

首先：包含 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);                        
                    }

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

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

如何在遍历每个房屋的数组的 for 循环中获取这些参数（状态）// map[key]？这是我的尝试。

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;
}

它会遮蔽/取消遮蔽每条可能的路径（不仅是出售或保留的路径），因为参数 returns 我未定义。我应该怎么做才能在我的循环中获得所需的状态？ :)

我是一名具有 JS 基础的平面设计师，我知道这可能就像字母表一样简单。然而-没有经验，缺乏知识-请帮忙。对于任何语言错误，我们深表歉意；）问候！

Answer 1

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

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

正是我要找的。感谢所有路过的人。

JS访问数组中的数据

JS accessing data in arrays

javascript

svg

snap.svg