Ajout/suppression d'une option de sélection multiple avec jquery

J'ai jquery qui va ajouter un élément à une liste de sélection et changer la couleur d'arrière-plan pour indiquer qu'il a été ajouté (la liste de sélection n'est pas visible). Lorsque je clique sur le signe plus, il ajoute l'élément à la liste, et les changements de l'arrière-plan vert. Quand je clique une deuxième fois, il supprime l'élément et de la couleur. Cela fonctionne une fois. Si je répète le cycle, il s'arrête de fonctionner. Toutes les idées pourquoi?

<ul>
<li><span id='add'> + </span>this is a test
 </li>
</ul>
<select multiple="multiple" id="destination"></select>

$(document).ready(function () {
  $("#add").click(function () {
var color = $("#add").css("background-color");
if (color == "transparent") {
  $("#add").css("background-color", "green");
  $("#destination").append('<option value="1">New option</option>');
} else {
  $("#add").css("background-color", "transparent");
  $("#destination option[value='1']").remove();
}
});
});

OriginalL'auteur John S | 2013-01-12

  1. 3

    Cela dépend du navigateur. Dans l'exemple en Chrome $("#add").css("background-color") retourne rgba(0,0,0,0) pas transparent. Ainsi, la lecture d'une couleur d'arrière-plan comme ce n'est pas de la croix-navigateur compatible.

    En général, je pense que vous pouvez être mieux avec les classes.

    http://jsfiddle.net/watRq/

    $(document).ready(function () {
  $("#add").click(function () {
    if ($(this).hasClass("transparent")) {
      $(this).addClass("green").removeClass("transparent");
      $("#destination").append('<option value="1">New option</option>');
   } else {
      $("#add").addClass("transparent").removeClass("green");
      $("#destination option[value='1']").remove();
   }
  });
});

    OriginalL'auteur Nucleon

  2. 3

    Ne pas vérifier les antécédents, utilisez juste la .toggle() event:

    http://jsbin.com/unojap/4/edit

      $("#add").toggle(function () {

        $("#add").css("background-color", "green");
        $("#destination").append('<option value="1">New option</option>');

  },function(){
        $("#add").css("background-color", "transparent");
        $("#destination option[value='1']").remove();

  });

    OriginalL'auteur Roko C. Buljan

  3. 1

    Au lieu de vérifier les couleurs d'arrière-plan, l'utilisation jQuery.données pour stocker si un élément a été ajouté ou non:

    var added = $(this).data("added");
//returns undefined if requested data does not exist
if (!added) {
    $(this).data("added", true);
    //change background, do stuff
}
else {
    $(this).removeData("added");
    //change background, do stuff
}

    Démo

    OriginalL'auteur Salman A