Question

我有一个jquery，它会将一个项目添加到选择列表中并更改背景颜色以指示它已被添加（选择列表不可见）。当我点击加号时，它会将项目添加到列表中并将背景更改为绿色。当我第二次单击它时，它会删除项目和颜色。这个工作一次。如果我重复循环，它就会停止工作。任何想法为什么会这样？

<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();
}
});
});

Answer 1

不要检查背景，只使用.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();

  });

Answer 2

这取决于浏览器。 Chrome中的示例$("#add").css("background-color")返回rgba(0,0,0,0)而不是transparent。因此，读取这样的背景颜色不符合跨浏览器。

总的来说，我认为你可能会更好地上课。

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();
   }
  });
});

Answer 3

使用jQuery.data来存储是否添加了元素，而不是检查背景颜色：

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
}

Demo

使用jquery从multiselect添加/删除选项

3 个答案: