Je dois ajouter un élément sur un DIV qui a une fonction de bascule. Mais lorsque je clique à nouveau sur basculer (lorsqu'il est basculé), l'élément que j'ai ajouté précédemment est à nouveau ajouté. Et je me retrouve avec deux éléments égaux.

Observation: Considérez que je dois ajouter plus d'un élément. Et supprimez également plusieurs éléments ajoutés.

Exemple:

DIV A
Élément A

Mes actions en Javascript avec JQuery:
1) Basculer DIV A et ajouter l'élément A = div A et l'élément A s'affichent.
2) Basculer DIV A = div A et l'élément A disparaissent.
3) Basculer DIV A et ajouter à nouveau l'élément A =

DIV A
   Element A
   Element A      

Je veux un seul élément A. (C'est le problème, la bascule ne supprime pas mon élément ajouté précédent)

Mon code est quelque chose comme ça:

$("#DIVA").toggle(function(){
    var my_div_to_be_appended = "<div>my div<div>";
    var my_div_to_be_appended2 = "<div>my div2<div>";
    $("DIVA").append(my_div_to_be_appended);
    $("DIVA").append(my_div_to_be_appended2);           
});
0
alexscjava 7 mars 2016 à 23:13

3 réponses

Meilleure réponse

C'est facile, au lieu d'utiliser append, utilisez html.

$("#DIVA").toggle(function(){
    var my_div_to_be_appended = "<div>my div<div>";
    // This will replace the content every time the toogle function is called.
    $("DIVA").html(my_div_to_be_appended);            
});
0
sch4v4 7 mars 2016 à 20:18

En suivant les suggestions, pour l'instant, je fais cela comme une solution:

$("#DIVA").toggle(function(){
    var my_div_to_be_appended = "<div>my div<div>";
    var my_div_to_be_appended2 = "<div>my div2<div>";
    $("DIVA").html(my_div_to_be_appended + my_div_to_be_appended2);           
});
0
alexscjava 7 mars 2016 à 20:50

Si votre DIVA est vide, la solution de sch4v4 est parfaite pour vous, mais si ce div contient déjà du contenu et que vous ne pouvez pas utiliser .html () alors une autre solution simple à votre problème est de garder un autre div vide à l'intérieur de votre $ ("# DIVA") au lieu de s'ajouter. Prenez l'exemple suivant

<div id="DIVA">
  <!-- Some other elements here - if any -->
  <div id="my_dynamic_div"></div>
</div>

Puis dans votre code jquery

$("#DIVA").toggle(function(){
    var my_div_to_be_appended = "<div>my div<div>";
    $("#my_dynamic_div").html(my_div_to_be_appended);            
});

J'espère que cela pourra aider.

0
Yousaf Hassan 7 mars 2016 à 20:22