创建可点击事件的方法：在同一路径上进行点击操作

Question

大家好，我目前正在制作一个DIV，当点击SVG的路径时，它会创建一个DIV。我已经将函数工作起来了，但现在遇到的问题是，当我点击另一个路径时，它只是打开一个新的DIV，而不是更新已经创建的DIV中的信息。下面是我现在的JavaScript示例：

var fakeObject = {"One": {"givenName": "Joshua"}, "Two": {"givenName": "James"}}

console.log(fakeObject)

$("path").on("click", function(e){
    var pathID = e.target.id.split('_');
  console.log(pathID)
  createDiv(pathID[1]);
});

function createDiv(value){
    $("#DOM").append(`
    <div>
        <p>${fakeObject[value].givenName}</p>
    </div>
  `)
}

我知道我的路径函数在点击路径时总是会触发，所以我不确定如何重写它，以关闭点击新路径时的DIV，但最好的情况是在点击新路径时只更改DIV中的元素。HTML示例的代码如下：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <path id ="Path_One" d="M10,60 L50,10 90,60" />'
  <path id="Path_Two" d="M20,30 L10,130 20,30" />
</svg>
<div id="DOM">
  <p>
    这是一个测试DIV
  </p>
</div>

目前，每当点击SVG上的路径时，它只会添加一个新的DIV，而不是在点击另一个对象时进行更新。我的思路是在点击新路径时关闭DIV，然后打开一个新的DIV，但如果能够使用新信息更新DIV，那就不需要这样做。

Answer 1

嘿 :) 你可以给你的div一个id，然后用length检查它是否存在。如果存在，只需使用.html填充新内容。

function createDiv(value){
      if($('#divname').length == 0){   
        $(document.createElement('div')).attr('id', 'divname')
      }
      $('#divname').html(<p>...</p>)                         
     }