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

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

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


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

Answer 3

可能最适合您使用 .on() 方法，如 jQuery 网站所述

从 jQuery 1.7 开始，.delegate() 已被 .on() 方法取代

试试吧

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

显然，然后.selected适当地设置类的样式