javascript - 選択したリスト要素を強調表示できますか？

Question

リストアイテムのクリックイベントにjQueryを使用して、選択したアイテムを何らかの方法で強調表示することは可能ですか？

$('#listReports').delegate('li', 'click', function () {
  var filename = $(this).text();
  // Any highlight methods or css tricks that I can add/remove for each click
});

Answer 1

addClass次のremoveClassメソッドを使用できます。

.selected {
   property: value
}

$('#listReports').delegate('li', 'click', function () {
     //var filename = $(this).text();
     $('.selected').removeClass('selected');
     $(this).addClass('selected');
});

Answer 2

jQuery Web サイトに記載されているように、.on() メソッドを使用するのがおそらく最適です。

jQuery 1.7 の時点で、.delegate() は .on() メソッドに取って代わられました。

代わりに試す

$("#listReports").on( "click", "li", function( ) {
    var filename = $(this).text();
    $(this).addClass("selected").siblings().removeClass("selected")
}

明らかに、.selectedクラスを適切にスタイルします

Answer 3

$('#listReports').delegate('li', 'click', function () {

     var filename = $(this).text();
     $('.highlight').removeClass('highlight');
     $(this).toggleClass('highlight');
});


.highlight{
  background-color: #ddd;  /*or whatever color */
  }