Javascript 单击时更改 div 的类？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7941276/
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
Changing the class of a div when clicking on it?
提问by user632347
How can I change a div class name when clicking on it? Eg:
单击时如何更改 div 类名称？例如：
<div class="first_name" onclick="changeClass();" id="first_name"></div>
I want to change it as follows, when a user clicks on the div
当用户单击 div 时，我想将其更改如下
<div class="second_name" onclick="changeClass();"></div>
I wrote the JavaScript as:
我将 JavaScript 编写为：
<script language="javascript">
function change_autorefreshdiv(){
var NAME = document.getElementById("first_name")
NAME.className="second_name"
}
</script>
It's working for the first instance only. That is on page load, if I click on it, the first_namegets changed into second_name. But clicking on it again, it won't revert the second_nameto first_name.
它仅适用于第一个实例。那是在页面加载时，如果我点击它，first_name就会变成second_name. 但是再次点击它，它不会恢复second_name到first_name.
回答by Rob W
You have to define the second class name. Currently, you have got a function which changes the class name to a hard-coded value, independent on the current class name. See also: MDN: if...else
您必须定义第二个类名。目前，您有一个函数可以将类名更改为硬编码值，与当前类名无关。另见：MDN：if...else
function change_autorefreshdiv(){
var NAME = document.getElementById("first_name");
var currentClass = NAME.className;
if (currentClass == "second_name") { // Check the current class name
NAME.className = "first_name"; // Set other class name
} else {
NAME.className = "second_name"; // Otherwise, use `second_name`
}
}
回答by Nishutosh Sharma
simple javascript function, put it in your application.js, or script tag :- (jQuery should be included to run the following function)
简单的 javascript 函数，把它放在你的 application.js 或 script 标签中：-（应该包含 jQuery 来运行以下函数）
function changeClass(){
$("#first_name").attr("class", "class-name-you-want-to-assign");
}
回答by Pieter VDE
A quite late answer, but the reaction marked as answer can be shortened:
一个很晚的答案，但可以缩短标记为答案的反应：
function change_autorefreshdiv(){
var NAME = document.getElementById("first_name");
NAME.className = (NAME.className == "second_name") ? "first_name" : "second_name";
}
This is a shortened notation of the if-else structure. It checks if the classNameis equal to "second_name".
If it is, the currentClassvariable will become "first_name", if it's not (meaning it's "first_name"),
it will become "second_name".
这是 if-else 结构的缩写。它检查是否className等于“second_name”。如果是，currentClass变量将成为“first_name”，如果不是（意味着它是“first_name”），它将成为“second_name”。
回答by GolezTrol
That's because there is no code to do so. Add a little check. I also added some semicolons. I wonder if your script would even work the first time.
那是因为没有代码可以这样做。添加一点检查。我还添加了一些分号。我想知道你的脚本是否会在第一次运行。
<script language="javascript">
function change_autorefreshdiv(){
var NAME = document.getElementById("first_name");
if (NAME.className==="second_name")
{
NAME.className="first_name";
}
else
{
NAME.className="second_name";
}
}
</script>
回答by Marcus
You have to use an if-statement to reverse it. Here's an example:
您必须使用 -if语句来反转它。下面是一个例子：
function change_autorefreshdiv(){
var NAME = document.getElementById("first_name")
var currentClass = NAME.className;
if(currentClass == "second_name"){
NAME.className = "first_name";
} else {
NAME.className = "second_name";
}
}
