Question

鉴于以下内容：

<div id="table-filters">
    <ul>
        <li class="active" onclick="myfunc();">blah</li>
        <li onclick="myfunc();">blah</li>
        <li onclick="myfunc();">blah</li>
        <li onclick="myfunc();">blah</li>
    </ul>
</div>

function myfunc() {
// Activate the LI clicked
$(this).addClass("active");
}

我希望我的JQUERY能够如下工作。将class =“active”添加到单击的LI中。

Answer 1

从HTML中删除onClick次来电，然后将以下内容放入.js文件中：

$("#table-filters li").click(function(){
  $(this).addClass("active").siblings("li.active").removeClass("active");
  // requested in comments: how to get id of LI clicked?
  var thisID = $(this).attr("id");
});

Answer 2

$("#table-filters li").click(function(){
  $("#table-filters li.active").removeClass("active"); // remove current active
  $(this).addClass("active"); // set new active

  // Put more stuff here that you want to happen when clicked.

});

使用此方法添加事件侦听器通常被认为是“好”方式，使用onlick="BLAH"添加侦听器被认为是一种不好的方式。

Answer 3

您不需要使用.click（...）;相反，你可以按照你想要的方式做到这一点：

<div id="table-filters">
    <ul>
        <li class="active" onclick="myfunc(this);">blah</li>
        <li onclick="myfunc();">blah</li>
        <li onclick="myfunc();">blah</li>
        <li onclick="myfunc();">blah</li>
    </ul>
</div>

function myfunc(li) {
// Activate the LI clicked
$(li).addClass("active");
}

JQUERY，返回单击的对象以添加类

3 个答案: