JQUERY，返回点击添加类的对象答案

【问题标题】：JQUERY, Returning the object that was clicked to add a ClassJQUERY，返回点击添加类的对象
【发布时间】：2010-01-10 04:31:07
【问题描述】：

鉴于以下情况：

<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。

【问题讨论】：

标签： jquery css css-selectors

【解决方案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");
});

【讨论】：

您好乔纳森，感谢您的回答。有没有一种方法可以做到这一点而不必绑定元素？我希望这个函数能做的不仅仅是添加一个类，而且添加很多函数可能会非常混乱。还有其他想法吗？
@nobosh 如果您需要更多操作，可以在$.addClass() 行下方添加更多操作。
这只是table-filters 中所有<li> 的一个函数。你能澄清一下你所说的很多功能是什么意思吗？
问题是我需要知道在函数中单击了哪个 LI，因为我将使用该信息进行 JQUERY 加载并将一些 HTML 注入 div。我打算通过执行类似 onclick="myfunc('Identified on which url to load');"> 之类的操作来扩展上述示例，如果我删除了 onclick，我就不能这样做。除非你能以某种方式提取被点击的 LI 的 ID？那可能吗？谢谢
你可以使用 $(this) 访问被点击的元素

【解决方案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"添加监听器被认为是不好的方式。

【讨论】：

【解决方案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");
}

【讨论】：