jQuery addClass onClick

Posted 2023-02-22

【中文标题】jQuery addClass onClick

【英文标题】：

【发布时间】：2011-04-03 18:28:02

【问题描述】：

设置很简单；我希望能够在触发 onClick 事件时向（在这种情况下）按钮添加一个类。我的问题是我还没有找到将按钮本身作为参数传递给函数的方法。我想做类似的事情：

<asp:Button ID="Button" runat="server" onclick="addClassByClick(this)"/>

然后是类似这样的 javascript 函数：

function addClassByClick(button)
    button.addClass("active")

我知道我在这里有很多错误，但这就是我发布的原因。我尝试过使用 jQuery 和不使用 jQuery 的不同场景，但我总是以失败的解决方案告终（点击突然停止通过，未添加类等）所以我决定询问专业人士。

对我可以尝试什么有什么建议吗？感谢您阅读编辑和所有帮助！

【问题讨论】：

正如许多人指出的那样，您的按钮的呈现 ID 不会是“按钮”。但是，您仍然可以通过 ID 而不是类来引用它（jquery 选择器在 ID 上的性能优于类），方法是： $("#")

【参考方案1】：

需要是jQuery元素才能使用.addClass()，所以需要像这样包裹在$()中：

function addClassByClick(button)
  $(button).addClass("active")

---

更好的整体解决方案是不显眼的脚本，例如：

<asp:Button ID="Button" runat="server" class="clickable"/>

然后在jquery中：

$(function()                        //run when the DOM is ready
  $(".clickable").click(function()   //use a class, since your ID gets mangled
    $(this).addClass("active");      //add the class to the clicked element
  );
);

【讨论】：

在你的第一个例子中，我真的可以使用“this”将按钮作为参数传递给函数吗？我不需要做一些选角吗？或者所有这些都处理了吗？

@Phil - 是的，您可以在第一个示例中传递 this，它是一个 DOM 元素，这就是所需要的 :) 我强烈建议您在这里使用一个不显眼的选项，例如回答虽然，它更容易维护。

@Nick - 我当然会尝试，但我真的对 jQuery 语法还不太满意。我真的应该阅读它。就像你的例子一样；如果按钮的类是： CssClass="button Horizo​​ntal floating" 我将如何定位它？

@Phil - 你可以使用任何你想要的，例如$(".button") 可以工作，或者$(".horizontal") 或组合$(".button.floating") 只会匹配一个元素与 both i> 类。我会去这里点击教程：docs.jquery.com/Main_Page（他们的数据库刚刚开始出错，应该很快就会修复）。

@Nick - 谢谢，非常感谢您的帮助。

【参考方案2】：

使用 jQuery：

$('#Button').click(function()
    $(this).addClass("active");
);

这样，您不必使用onclick 处理程序污染您的 html 标记。

【讨论】：

这种方法的问题是元素ID不能保证是Button，通常不是。

好吧，你只能使用问题给你的东西。我确信 Phil 足够聪明，可以查找 jQuery 选择器文档并发现自己是一个适合这项工作的不错的选择器。

这个问题确实给了你需要的东西，标记是 ASP.Net 标记:)

【参考方案3】：

$(document).ready(function() 
    $('#Button').click(function() 
        $(this).addClass('active');
    );
);

应该可以解决问题。 除非您使用 ajax 加载按钮。 在这种情况下，您可以这样做：

$('#Button').live('click', function() ...

还要记住不要在你的 html 代码中多次使用同一个 id。

【参考方案4】：

$('#button').click(function()
    $(this).addClass('active');
);

【参考方案5】：

尝试让你的 CSS 更具体，这样新的（绿色）样式比以前的更具体，这样它对我有用！

例如，你可以在 css 中使用：

button:active /*your style here*/

而不是（可能不工作）：

.active /*style*/ (.active is not a pseudo-class)

希望对你有帮助！