So erstellen Sie ein anklickbares Ereignis: Klicken Sie auf denselben Pfad

Question

Hallo zusammen, ich erstelle gerade ein DIV, das beim Klicken auf den Pfad der SVG ein DIV erstellt. Ich habe die Funktion zum Laufen gebracht, aber jetzt habe ich das Problem, dass, wenn ich auf einen anderen Pfad klicke, einfach ein neues DIV geöffnet wird, anstatt die Informationen im bereits erstellten DIV zu aktualisieren. Hier ist mein aktuelles JavaScript-Beispiel:

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

Ich weiß, dass meine Pfadfunktion immer ausgelöst wird, wenn auf den Pfad geklickt wird, daher bin ich mir nicht sicher, wie ich sie umschreiben soll, um den DIV auszuschalten, wenn auf einen neuen Pfad geklickt wird, aber im besten Fall wäre es, den DIV nur zu ändern, wenn ein neuer Pfad angeklickt wird Pfad ist angeklicktes Element. Der Code für das HTML-Beispiel lautet wie folgt:

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

Derzeit wird jedes Mal, wenn auf einen Pfad im SVG geklickt wird, einfach ein neues DIV hinzugefügt, anstatt zu aktualisieren, wenn auf ein anderes Objekt geklickt wird. Mein Gedanke war, das DIV zu schließen, wenn auf den neuen Pfad geklickt wird, und ein neues zu öffnen, aber wenn das DIV mit den neuen Informationen aktualisiert werden könnte, wäre das nicht notwendig.

Answer 1

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

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