Comment créer un événement cliquable : cliquez sur le même chemin

Question

Salut à tous, je crée actuellement un DIV qui, lorsque l'on clique sur le chemin du SVG, crée un DIV. La fonction fonctionne, mais maintenant le problème que j'ai est que lorsque je clique sur un autre chemin, cela ouvre simplement un nouveau DIV au lieu de mettre à jour les informations dans le DIV déjà créé. Voici mon exemple JavaScript actuel :

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

Je sais que ma fonction de chemin se déclenche toujours lorsque l'on clique sur le chemin, donc je ne sais pas comment le réécrire pour désactiver le DIV lorsqu'un nouveau chemin est cliqué, mais le meilleur des cas serait de modifier le DIV uniquement lorsqu'un nouveau chemin est cliqué. le chemin est un élément cliqué. Le code de l'exemple HTML est le suivant :

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

Actuellement, chaque fois que l'on clique sur un chemin du SVG, il ajoute simplement un nouveau DIV au lieu de se mettre à jour lorsqu'un autre objet est cliqué. Ma pensée était de fermer le DIV lorsque l'on clique sur le nouveau chemin et d'en ouvrir un nouveau, mais si le DIV pouvait être mis à jour avec les nouvelles informations, cela ne serait pas nécessaire.

Answer 1

Hé :) Vous pouvez donner un identifiant à votre div, puis utiliser la longueur pour vérifier s'il existe. S'il existe, remplissez-le simplement avec du nouveau contenu en utilisant .html.

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