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ではnotを$("#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();
   }
  });
});
于 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 に答える