Javascript/Jquery 更改类 onclick？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7014385/
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
Javascript/Jquery to change class onclick?
提问by funguy
I want to change a class onclick. What I have at the moment:
我想更改一个类 onclick。我目前所拥有的：
<script>
function changeclass() {
var NAME = document.getElementById("myclass")
NAME.className="mynewclass"
}
</script>
But, ofcourse, its not working. Also, it should revert to previuos state onclick again.
但是，当然，它不起作用。此外，它应该再次恢复到以前的状态 onclick。
My html:
我的html：
<div id="showhide" class="meta-info" onclick="changeclass();">
So, whenever I press on #showhide myclass should change to mynewclass. Thanks for help in advance!
因此，每当我按下#showhide myclass 时，都应更改为 mynewclass。提前感谢您的帮助！
回答by SunnyRed
With jquery you could do to sth. like this, which will simply switch classes.
使用 jquery 你可以做某事。像这样，这将简单地切换类。
$('.showhide').click(function() {
$(this).removeClass('myclass');
$(this).addClass('showhidenew');
});
If you want to switch classes back and forth on each click, you can use toggleClass, like so:
如果您想在每次点击时来回切换类，您可以使用 toggleClass，如下所示：
$('.showhide').click(function() {
$(this).toggleClass('myclass');
$(this).toggleClass('showhidenew');
});
回答by Griffin
Your getElementByIdis looking for an element with id "myclass", but in your html the id of the DIV is showhide. Change to:
您getElementById正在寻找一个 id 为“myclass”的元素，但在您的 html 中，DIV 的 id 是showhide. 改成：
<script>
function changeclass() {
var NAME = document.getElementById("showhide")
NAME.className="mynewclass"
}
</script>
Unless you are trying to target a different element with the id "myclass", then you need to make sure such an element exists.
除非您尝试以 ID 为“myclass”的不同元素为目标，否则您需要确保存在这样的元素。
回答by CaffGeek
Just using this will add "mynewclass" to the element with the id myElement and revert it on the next call.
仅使用它就会将“mynewclass”添加到 id 为 myElement 的元素中，并在下一次调用时将其还原。
<div id="showhide" class="meta-info" onclick="changeclass(this);">
function changeclass(element) {
$(element).toggleClass('mynewclass');
}
Or for a slighly more jQuery way (you would run this after the DOM is loaded)
或者稍微更 jQuery 的方式（你会在加载 DOM 后运行它）
<div id="showhide" class="meta-info">
$('#showhide').click(function() {
$(this).toggleClass('mynewclass');
});
See a working example of this here: http://jsfiddle.net/S76WN/
在此处查看一个工作示例：http: //jsfiddle.net/S76WN/
回答by Felix Eve
For a super succinct with jQuery approach try:
对于使用 jQuery 方法的超级简洁，请尝试：
<div onclick="$(this).toggleClass('newclass')">click me</div>
Or pure JS:
或者纯JS：
<div onclick="this.classList.toggle('newclass');">click me</div>
回答by ayyp
I would think this: http://jsfiddle.net/Skooljester/S3y5p/1/should do it. If I don't have the class names 100% correct you can just change them to whatever you need them to be.
我认为：http: //jsfiddle.net/Skooljester/S3y5p/1/应该这样做。如果我没有 100% 正确的类名，您可以将它们更改为您需要的任何名称。
回答by Vikas Kandari
<div class="liveChatContainer online">
<div class="actions" id="change">
<span class="item title">Need help?</span>
<a href="/test" onclick="demo()"><i class="fa fa-smile-o"></i>Chat</a>
<a href="/test"><i class="fa fa-smile-o"></i>Call</a>
<a href="/test"><i class="fa fa-smile-o"></i>Email</a>
</div>
<a href="#" class="liveChatLabel">Contact</a>
</div>
<style>
.actions_one{
background-color: red;
}
</style>
<script>
function demo(){
document.getElementById("change").setAttribute("class","actions_one");}
</script>
回答by maverick
Another example is:
另一个例子是：
$(".myClass").on("click", function () {
var $this = $(this);
if ($this.hasClass("show") {
$this.removeClass("show");
} else {
$this.addClass("show");
}
});
回答by Chris McCowan
I think you mean that you want want an onclick event that changes a class.
我想你的意思是你想要一个改变类的 onclick 事件。
Here is the answer if someone visits this question and is literally looking to assign a class and it's onclick with JQUERY.
如果有人访问这个问题并且实际上是想分配一个类并且它是使用 JQUERY 的 onclick，那么这里是答案。
It is somewhat counter-intuitive, but if you want to change the onclick event by changing the class you need to declare the onclick event to apply to elements of a parent object.
这有点违反直觉，但是如果您想通过更改类来更改 onclick 事件，您需要声明 onclick 事件以应用于父对象的元素。
HTML
HTML
<div id="containerid">
Text <a class="myClass" href="#" />info</a>
Other Text <div class="myClass">other info</div>
</div>
<div id="showhide" class="meta-info">hide info</div>
Document Ready
文件就绪
$(function() {
$("#containerid").on("click",".myclass",function(e){ /*do stuff*/ }
$("#containerid").on("click",".mynewclass",function(e){ /*do different stuff*/ }
$("#showhide").click(function() {changeclass()}
});
Slight Tweak to Your Javascript
对您的 Javascript 稍作调整
<script>
function changeclass() {
$(".myClass,.myNewClass").toggleClass('myNewClass').toggleClass('myClass');
}
</script>
If you can't reliably identify a parent object you can do something like this.
如果你不能可靠地识别父对象，你可以做这样的事情。
$(function() {
$(document).on("click",".myclass",function(e){}
$(document).on("click",".mynewclass",function(e){}
});
If you just want to hide the items you might find it simpler to use .hide() and .show().
如果您只想隐藏项目，您可能会发现使用 .hide() 和 .show() 更简单。
