Hai semua, saya sedang membuat DIV yang apabila laluan SVG diklik, ia mencipta DIV. Saya mempunyai fungsi berfungsi tetapi sekarang masalah yang saya hadapi ialah apabila saya mengklik pada laluan lain ia hanya membuka DIV baharu dan bukannya mengemas kini maklumat dalam DIV yang telah dibuat. Berikut ialah contoh JavaScript semasa saya:

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>
  `)
}

Saya tahu fungsi laluan saya sentiasa menyala apabila laluan diklik, jadi saya tidak pasti cara menulis semula untuk mematikan DIV apabila laluan baharu diklik, tetapi kes terbaik ialah menukar DIV apabila laluan baharu diklik. laluan diklik elemen. Kod untuk contoh HTML adalah seperti berikut:

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

Pada masa ini, apabila laluan pada SVG diklik, ia hanya menambah DIV baharu dan bukannya mengemas kini apabila objek lain diklik. Fikiran saya adalah untuk menutup DIV apabila laluan baharu diklik dan membuka laluan baharu, tetapi jika DIV boleh dikemas kini dengan maklumat baharu, itu tidak diperlukan.