使用jQuery在SVG地圖上只選擇一個區域

我使用Mapael，一個Raphael擴展爲了提供一個交互式地圖，到目前爲止我已經編碼它，因此您可以選擇多個區域並根據區域使div元素可見點擊，現在我希望能夠限制用戶一次只選擇一個區域。使用jQuery在SVG地圖上只選擇一個區域

http://plnkr.co/edit/2UAl4Yax99dJAPIDWuTy?p=preview

這裏是覆蓋點擊功能代碼的一部分。

eventHandlers: { 
    click: function(e, id, mapElem) { 
     var newData = { 
      'areas': {} 
     }; 
     if (mapElem.originalAttrs.fill == "#f4f4e8" && "id[^='department']") { 
      newData.areas[id] = { 
       attrs: { 
        fill: "#0088db" 
       } 
      }; 
      $('#' + id).css("visibility", "visible") 
     } 
     else if (mapElem.originalAttrs.fill == "#0088db" && "id[^='department']") { 
      newData.areas[id] = { 
       attrs: { 
        fill: "#f4f4e8" 
       } 
      }; 
      $("#" + id).css("visibility", "hidden") 
     } 
     $(".mapcontainer").trigger('update', [newData]); 
    } 
},

同樣，這裏顯示的地圖，您可以點擊多個領域，但是我想使它所以你可以一次選擇一個區域。

我已經嘗試了很長一段時間，自己想出了一個解決方案，但是我認爲我已經讓編碼器有點阻擋，並且可以通過一些建議來指向正確的方向。我一直在嘗試.bind，.target和更新功能之後的mapael（如果可以幫助，請在下面顯示）。

var options = { 
    mapOptions: {},    // was updatedOptions 
    replaceOptions: false  // replace opt.resetPlots/resetAreas: whether mapsOptions should entirely replace current map options, or just extend it, 
    newPlots: {},    // was newPlots 
    newLinks: {},    // was opt.newLinks 
    deletePlotKeys: [],   // was deletedPlots 
    deleteLinkKeys: [],   // was opt.deletedLinks 
    setLegendElemsState: true, // is new 
    animDuration: 0,   // was opt.animDuration 
    afterUpdate: function(){} // was opt.afterUpdate 
}; 
$(".container").trigger('update', [options]);

我不知道如果解決方案可以像通過SVG路徑循環時，第一次點擊，以確保沒有元素已被點擊/有藍色填充，然後再從那裏？雖然這聽起來有點過於複雜，但我不確定它在實踐中如何實施。

來源

2016-04-11 alexc

還記得最後一次點擊和重置按第二下它的顏色。 –

我會在做一個else if語句嗎？ – alexc

我已經找到了解決這個問題的方法，這裏有一個解決方案;

eventHandlers: { 
        click: function (e, id, mapElem, textElem) { 
         var newData = { 
          'areas': {} 
         }; 

         if (previousSelectedElementId !== null) { 
          newData.areas[previousSelectedElementId] = { 
           attrs: { 
            fill: "#5ba4ff" 
           } 
          }; 
         } 

         if (mapElem.originalAttrs.fill == "#5ba4ff") { 
          newData.areas[id] = { 
           attrs: { 
            fill: "#0088db" 
           } 
          }; 
          previousSelectedElementId = id; 
         } else { 
          newData.areas[id] = { 
           attrs: { 
            fill: "#5ba4ff" 
           } 
          }; 
          previousSelectedElementId = null; 
         } 
         $(".mapcontainer").trigger('update', [newData]); 
        }

http://jsfiddle.net/neveldo/wfftgu20/

來源

2016-05-10 09:12:00 alexc

使用jQuery在SVG地圖上只選擇一個區域

回答

相關問題