配列内のデータにアクセスするJS

Question

ウェブで見つけたチュートリアルでは、私は何らかの形で準備されたSVGファイルからインタラクティブマップを作成しました。

無料、予約、または売却されている住宅を表示し、ステータスを変更するためにWordPressの高度なカスタムフィールドに接続しています（これが私が[ショートコード]を使用した理由です）。 家が空いているとき、それはハイライト（ホバー上）緑、売り=赤、予約=オレンジです。

すべてが完璧に動作していますが... 私は、販売されているか予約されているすべての家を黒く塗りつぶすボタンを作成したいだけです。

私はこのコードのほとんどを短くして、この作業を行うための私の試みを示します。すべてのパスがユーザーに表示されている2つの層がある

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; 

：

まず：SVGパスを持つアレイと属性は、パス自体と名前を（あなたは、インデックスマップ[キーということであるかを理解します] [0]とマップを[キー] [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);       
        } 

コードはすべての家に続きます。 問題は

私は、（ホバリングされた）単一のオブジェクトを操作すると、そのオブジェクトを呼び出すことでどのように動作するかを見ています。このセレクタによってパラメータ。ここに私の試みです

どのように私はすべての家//マップの配列を通過するループのためにそれらのパラメータ（ステータス）を取得することができます[キー]？ 。

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

それは、パラメータは私に定義されていないので、すべての可能なパス（販売されているものや予約されているものだけでなく）をシェード/アンシェイドします。ループ内で目的のSTATUSを取得するにはどうすればよいですか？ :)

私はJSの基礎を持つグラフィックデザイナーですが、これはアルファベットのように簡単かもしれないことを認識しています。しかし、経験はありません。知識が不足しています。助けてください。 言語の間違いをおかけして申し訳ありません;） Greets！

Answer 1

私が探していた.dataはmap [key]に保存されていませんでしたが、SVGパスを含む内部配列マップ[key] [0]に保存されていました。これはすべての.dataが保存される場所です。

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

私が探していたものです。踏み込んだ人に感謝します。