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 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)
希望对你有帮助!
【讨论】:
以上是关于jQuery addClass onClick的主要内容,如果未能解决你的问题,请参考以下文章
jQuery学习笔记 .addClass()/.removeClass()简单学习
为啥 jQuery .scroll() 方法不能与 .addClass() 方法一起使用
解决jQuery(e).addclass(‘xxx‘)始终不生效的问题 - $(...).addclass is not a function