访问 jQuery 中的 SVG 数据元素

Question

我正在使用拉斐尔扩展程序 Mapael 来创建法国的交互式地图。一旦选择了 SVG 路径，我想触发 onClick 事件。

我已经能够完成这项工作，但是我觉得我将不得不为一些可以重复或包含在带有 ELSE IF 语句的代码块中的东西编写大量代码。

请参阅下面的代码作为示例；

这是绘制地图区域的代码；

(function (factory) {
if (typeof exports === 'object') {
    // CommonJS
    module.exports = factory(require('jquery'), require('mapael'));
} else if (typeof define === 'function' && define.amd) {
    // AMD. Register as an anonymous module.
    define(['jquery', 'mapael'], factory);
} else {
    // Browser globals
    factory(jQuery, jQuery.fn.mapael);
}
}

(function ($, Mapael) {

"use strict";

$.extend(true, Mapael,
    {
        maps :  {
            france_departments : {
                width : 661.85596,
                height : 637.08588,
                elems : {
                   "department-75" : "m 533.65,37.59 c -0.56,0.01 -1.14,0.07 -1.69,0.09 l -0.47,0 -0.06,0 c -3.2,-0.16 -6.2,1.71 -8.25,3.88 -1.18,-0.38 -2.14,0.15 -3.09,0.66 -1.64,0.07 -4.2,2.99 -1.75,3.84 2.04,0.46 2.36,3 4.56,3.38 4.15,0.71 8.61,3.62 12.69,1 2.59,-2.23 5.56,1.56 8.38,0.72 1.37,-1.09 1.13,-4.27 -1.16,-3.72 -1.21,-0.03 -2,-1.04 -2.81,-0.38 -1.83,-2.4 -0.68,-4.78 -2.88,-7.06 -0.22,-2.16 -1.78,-2.45 -3.47,-2.41 z M 369.8,144.62 c -0.22,0.01 -0.47,0.02 -0.69,0.03 l -0.19,0 -0.03,0 c -1.27,-0.06 -2.44,0.7 -3.25,1.56 -0.47,-0.15 -0.87,0.05 -1.25,0.25 -0.65,0.03 -1.66,1.16 -0.69,1.5 0.81,0.18 0.94,1.23 1.81,1.38 1.65,0.28 3.41,1.41 5.03,0.38 1.03,-0.89 2.23,0.62 3.34,0.28 0.54,-0.43 0.44,-1.69 -0.47,-1.47 -0.48,-0.01 -0.86,-0.33 -1.19,-0.06 -0.56,-1.04 -0.22,-1.97 -1.09,-2.88 -0.09,-0.86 -0.67,-0.98 -1.34,-0.97 z",
                   "department-59" : "M 377.51,2.78e-5 C 374.07,1.47 370.51,2.66 366.77,2.44 c -3.1,0.89 -6.29,1.6 -9.18,3.02 1.24,2.59 3.27,6.24 4.33,9.49 0.45,3.3 2.89,5.84 6.41,5.27 1.94,-0.78 4.85,1.64 1.47,1.89 -2.68,1.66 1.93,3.12 0.19,5.04 2.78,-0.45 4.23,3.9 7.14,2.5 1.81,1.18 3.37,-0.01 5.36,1.07 1.63,-1.32 3.21,-0.63 4.48,0.93 0.73,-1.57 2,-1.61 0.95,-3.07 1.61,-2.58 6.95,1.51 2.94,2.57 -2.83,1.01 0.34,3.73 -1.12,5.39 0.9,1.48 4.86,-1.3 3.65,1.61 2.92,-0.02 7.29,0 6.35,4.16 1.35,-0.92 3.57,-0.15 1.94,1.67 -3,0.14 -4.31,3.74 -1.12,5.07 1.69,0.96 2.08,2.48 0.62,3.67 0.34,2.55 4.5,0.15 4.8,3.09 2.64,0.43 -0.05,2.2 -0.9,2.42 1.06,1.6 0.36,2.77 -1.25,3.07 2.12,1.52 -1.64,2.22 0.07,4.15 -2.91,2.78 1.69,6.63 4.47,4.88 2.26,-1.32 5.08,2 6.87,-0.71 2.98,0.44 6.14,1.89 8.42,-1.06 1.98,-0.29 4.46,2.95 5.68,-0.34 2.9,-1.43 5.98,1.3 9.04,1.19 1.53,2.96 3.45,-0.56 5.79,0.04 -1.87,3.96 3.7,3.7 6.26,4.11 2.29,-0.95 -0.64,-4.29 2.61,-4.77 2.82,-0.8 0.92,-4.83 -0.55,-5.74 -3.06,0.67 -0.13,-3.85 -0.08,-5.37 1.87,-1.24 2.82,-4.03 -0.19,-4.26 -1.07,4.16 -2.1,-2.65 -4.39,-2.68 -1.69,-3.72 -4.82,-0.59 -7.62,-0.73 -2.37,-0.85 -5.7,-2.48 -7.81,-0.09 -1.66,4.51 -4.19,-2.36 -2.95,-4.64 0.52,-3.52 -3.24,-7.4 -6.77,-5.76 -1.77,0.07 0.3,-3.59 -2.48,-2.13 -2.41,2.31 -6.1,2.01 -8.29,-0.47 -0.77,-2.54 -0.39,-5.31 -1.88,-7.78 0.28,-2.25 0.31,-4.41 -2.29,-5.22 -0.57,-2.79 -2.95,-5.31 -5.75,-3.44 -2.32,0.87 -5.9,0.75 -6.52,3.6 -1.2,3.14 -4.3,-0.54 -6.47,-0.63 -1.62,-2.75 -3.49,-6.42 -7.19,-5.82 -1.19,-1.96 -1.69,-5.46 -1.07,-7.12 2.22,-2.65 -1.65,-4.24 -2.01,-6.55 C 378.49,2.6 378.6,1.01 377.51,3.38e-5 z M 405.6,54.52 l 0.01,0.01 -0.01,-0.01 z",
                  }
            }
        }
    }
);

}));

这里是试图处理 onClick 事件的损坏脚本的代码；

$(function() {

$(".mapcontainer").mapael({
    map: {
        name: "france_departments"
            // Enable zoom on the map
            ,
        zoom: {
            enabled: true
        }
        // Set default plots and areas style,
        ,
        defaultArea: {
            attrs: {
                fill: "#f4f4e8",
                stroke: "#ced8d0",
                cursor: "pointer"
            },
            attrsHover: {
                fill: "#68BCFF"
            },
            eventHandlers: {
                click: function(e, id, mapElem) {
                    var newData = {
                        'areas': {}
                    };
                    if (mapElem.originalAttrs.fill == "#f4f4e8" && mapElem.paths.id == "department-59" ) {
                        newData.areas[id] = {
                            attrs: {
                                fill: "#0088db"
                            }
                        };
                        alert("test")
                    }
                    else if (mapElem.originalAttrs.fill == "#f4f4e8" && mapElem.paths.id == "department-75" ) {
                        newData.areas[id] = {
                            attrs: {
                                fill: "#0088db"
                            }
                        };
                        alert("test")
                    }
                    else if (mapElem.originalAttrs.fill == "#0088db") {
                        newData.areas[id] = {
                            attrs: {
                                fill: "#f4f4e8"
                            }
                        };
                    }

                    $(".mapcontainer").trigger('update', [newData]);

                }
            },
        }
    },


    // Customize some areas of the map
    areas: {
        "department-59": {
            tooltip: {
                content: "Nord (59)"
            },

        },
        "department-75": {
            value: "2268265",

            tooltip: {
                content: "Paris (75)"
            }

下面我将包括2个插件，第一个是工作版本，第二个是我希望如何重构代码。

工作版本 --

http://plnkr.co/edit/XXXNQcND54Iw3HirefMc?p=preview

损坏的版本 --

http://plnkr.co/edit/ExDmSj?p=preview

为了简单起见，我已将此示例的地图缩减为两个区域。

希望这个 post 有意义，如果没有，我可以根据需要提供更多 information/details 问题。任何帮助将不胜感激！

谢谢

Answer 1

我只需要在 if 语句中加入 "id"。觉得有点傻！

如果有人感兴趣，这里有一个 plunk；

if (mapElem.originalAttrs.fill == "#f4f4e8" && id == "department-59" ) {

http://plnkr.co/edit/0WfnSkQLQbQttK76aymA?p=preview

谢谢。

访问 jQuery 中的 SVG 数据元素

Accessing SVG data elements in jQuery

javascript

jquery

svg

raphael

mapael