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类的样式

我可以突出显示所选的列表元素吗？

3 个答案: