Question

我试图编写一个小脚本来将jVectorMap的每个路径元素包装在一个锚点中，以使其可以访问键盘并简化一些事件处理我不得不这样做。我通常只是尝试编辑程序代码，但我无法确定未经授权的生产代码的正面或反面，我感觉不够耐心，无法使用二十多个源文件

我在调用appendChild时没有添加子项的锚元素遇到一个小问题。

可能有一种更好的方法可以做到这一点 - 实际上，我几乎可以肯定 - 比将数组中的每个元素都包装在一个锚中然后将它扔到一个数组中，吞噬元素然后当它们全部消失时将它们从阵列中取代，但目前还没有任何东西可以来找我，这更像是一个概念证明，而不是生产代码。（无论如何，我不是一个优秀的程序员，如果一个更好的方法对你很明显，我很乐意听到它。）

因此，我几乎记录了流程的每一步，从节点到锚定节点，当节点出现在控制台中，而锚定节点也是如此，锚定节点不附加节点内容给自己。所以我只是得到了一堆没有内容的链接。

这是我到目前为止的代码。

$(document).ready( function() {
    $('#map').vectorMap({map: 'us_aea_en'});

    var map = document.getElementById("map");
    var container = map.firstChild;
    var svg = container.firstChild;
    var pathGroup = svg.firstChild;

    var nodeArray = [];

    var xlinkNS = "http://www.w3.org/1999/xlink";
    var svgNS = "http://www.w3.org/2000/svg";

    while (pathGroup.firstChild) {
        var node = pathGroup.firstChild;
        var anchoredNode = document.createElementNS(svgNS, "a");
        anchoredNode.setAttributeNS(xlinkNS,"xlink:href","dev.sbcindustry.com/membership/"+node.getAttribute("data-code").slice(3));
        anchoredNode.appendChild(node);
        console.log(anchoredNode);
        nodeArray.push(anchoredNode);
        node.parentNode.removeChild(node);
    }

    for (i=0; i < nodeArray.length; i++) {
        pathGroup.appendChild(nodeArray[i]);
    }

});

我很可能犯了一些愚蠢的错误，因为我使用SVG的大部分工作都是使用各种库，但是因为我已经加载了130多亿个文件来制作地图（被授予，比我们之前使用的非常优化的图像+图像地图少），我宁愿不投掷Raphael或svg.js或者混合搭配。

Answer 1

我可以直接看到一个问题。您将node添加到您创建的锚节点，但随后告诉它自行删除：

node.parentNode.removeChild(node);

SVG节点不附加子元素

1 个答案: