Javascript jQuery addClass onClick
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3566838/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery addClass onClick
提问by Phil
The setting is easy; I want to be able to add a class to (in this case) a button when onClick-event is fired. My problem is that I haven't found a way to pass the button itself as the parameter to the function. I'd like to do something like:
设置很简单；我希望能够在触发 onClick 事件时向（在这种情况下）按钮添加一个类。我的问题是我还没有找到将按钮本身作为参数传递给函数的方法。我想做类似的事情：
<asp:Button ID="Button" runat="server" onclick="addClassByClick(this)"/>
And then a javaScript function something like this:
然后是一个像这样的 javaScript 函数：
function addClassByClick(button){
button.addClass("active")
}
I know I've got a lot of errors here, but that's why I'm posting. I've tried different scenarios with jQuery and without jQuery but I always end up with a broken solution (clicks suddenly stop coming through, class not added etc etc) so I decided to ask the pro's.
我知道我在这里有很多错误，但这就是我发布的原因。我已经尝试过使用 jQuery 和不使用 jQuery 的不同场景，但我总是得到一个破碎的解决方案（点击突然停止，类未添加等）所以我决定问专业人士。
Any suggestion to what I can try? Thanks for reading editand all the help!
对我可以尝试的任何建议？感谢您阅读编辑和所有帮助！
回答by Nick Craver
It needs to be a jQuery element to use .addClass(), so it needs to be wrapped in $()like this:
它需要是一个 jQuery 元素才能使用.addClass()，所以它需要$()像这样包装：
function addClassByClick(button){
$(button).addClass("active")
}
A better overall solution would be unobtrusive script, for example:
一个更好的整体解决方案是不显眼的脚本，例如：
<asp:Button ID="Button" runat="server" class="clickable"/>
Then in jquery:
然后在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
});
});
回答by Benjamin Wohlwend
Using jQuery:
使用jQuery：
$('#Button').click(function(){
$(this).addClass("active");
});
This way, you don't have to pollute your HTML markup with onclickhandlers.
这样，您就不必使用onclick处理程序污染 HTML 标记。
回答by demux
$(document).ready(function() {
$('#Button').click(function() {
$(this).addClass('active');
});
});
should do the trick. unless you're loading the button with ajax. In which case you could do:
应该做的伎俩。除非你用ajax加载按钮。在这种情况下，你可以这样做：
$('#Button').live('click', function() {...
Also remember not to use the same id more than once in your html code.
还要记住不要在你的 html 代码中多次使用相同的 id。
回答by viridis
Try to make your css more specific so that the new (green) style is more specific than the previous one, so that it worked for me!
尝试使您的 css 更具体，以便新的（绿色）样式比以前的样式更具体，以便它对我有用！
For example, you might use in css:
例如，您可以在 css 中使用：
button:active {/*your style here*/}
Instead of (probably not working):
而不是（可能不起作用）：
.active {/*style*/} (.active is not a pseudo-class)
Hope it helps!
希望能帮助到你！
回答by kevtrout
$('#button').click(function(){
$(this).addClass('active');
});
