jQuery addClass onClick答案

【问题标题】：jQuery addClass onClickjQuery 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 上的性能优于类），方法是： $("#")

标签： javascript asp.net jquery

【解决方案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 Horizontal 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)

希望对你有帮助！

【讨论】：