2

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

3 回答 3

3

不要检查背景，只使用.toggle()事件：

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

  });
于 2013-01-12T08:41:18.457 回答
3

这取决于浏览器。在 Chrome 中的示例$("#add").css("background-color")返回rgba(0,0,0,0)not 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();
   }
  });
});
于 2013-01-12T08:41:56.823 回答
1

不是检查背景颜色，而是使用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
}

演示

于 2013-01-12T10:00:02.397 回答