jQuery addClass onClick

Posted

技术标签:

【中文标题】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)

希望对你有帮助!

【讨论】:

以上是关于jQuery addClass onClick的主要内容,如果未能解决你的问题,请参考以下文章

jQuery学习笔记 .addClass()/.removeClass()简单学习

为啥 jQuery .scroll() 方法不能与 .addClass() 方法一起使用

解决jQuery(e).addclass(‘xxx‘)始终不生效的问题 - $(...).addclass is not a function

jQuery addClass() 方法

JQuery属性操作 addclass removeclass hasclass toggleClass()

jQuery的addClass,removeClass和toggleClass方法