Javascript 更改具有相同类的所有元素的背景颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14307163/
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 background color of all elements with the same class
提问by john cs
I have a link and a table row that have matching classes. When the link is clicked, I would like to change the background color of the row with the same class. For each case, there will be only one row with the same class.
我有一个链接和一个具有匹配类的表格行。单击链接时，我想更改具有相同类的行的背景颜色。对于每种情况，只有一行具有相同的类。
Here is my current function.
这是我目前的功能。
<script type="text/javascript">
function check(x) {
elements = document.getElementsByClassName(x);
for (var i = 0; i < elements.length; i++) {
elements[i].bgColor="blue";
}
}
</script>
Here is a part of the table row script:
这是表行脚本的一部分：
<tr class="alt1 12">
<td width="50" height="55">
<img src="iPhone/statusicon/12.png" alt="" id="forum_statusicon_12" border="0"></td>
<td>
<div class="forumtitle">
<a class="forumtitle 12" href="forumdisplay.php?f=12" action="async" onclick="check(this.className.split(' ')[1])">News and Current Events</a></div>
</td>
<td width="25">
<div class="forumarrow"><img src="iPhone/chevron.png" alt="" border="0"></div>
</td>
</tr>
The table row has two classes, and I need the second one (the number) to be what is addressed. The current code gives the error "An invalid or illegal string was specified"
表行有两个类，我需要第二个类（数字）来处理。当前代码给出错误“指定了无效或非法的字符串”
回答by drinchev
You have several errors. You mixed classes with ids and also the classproperty is actually className
你有几个错误。您将类与 id 混合，并且该class属性实际上是className
<script type="text/javascript">
function check(x) {
elements = document.getElementsByClassName(x);
for (var i = 0; i < elements.length; i++) {
elements[i].style.backgroundColor="blue";
}
}
</script>
<a href="#" class="first" onclick="check(this.className)">change first row</a>
<a href="#" class="second" onclick="check(this.className)">change second</a>
<!-- FIX ( id -> class ) FIX ( class -> className ) -->
<table>
<tr class="first">
<td>test1</td>
</tr>
<tr class="second">
<!--FIX ( id -> class ) -->
<td>test2</td>
</tr>
</table>
Check this jsfiddle
检查这个jsfiddle
回答by antoyo
You can also do it easily without jQuery with querySelectorAll():
您也可以使用 querySelectorAll() 在没有 jQuery 的情况下轻松完成：
<script type="text/javascript">
function check(selector)
{
var elements = document.querySelectorAll(selector);
for (var i = 0; i < elements.length; i++) {
elements[i].style.backgroundColor = "blue";
}
}
</script>
<a href="#" class="first" onclick="check('.' + this.className)">change first row</a>
<a href="#" id="second" onclick="check('#' + this.id)">change second</a>
<table>
<tr class="first">
<td>test1</td>
</tr>
<tr id="second">
<td>test2</td>
</tr>
回答by Mooseman
jQuery simplifies it:
jQuery 简化了它：
$(".button").click(function(){
var class = $(this).attr("data-class");
var color = $(this).attr("data-color");
$("."+class).css("background-color",color);
});
.buttonis the class to apply to the button, add data-classfor the class you would like to change the background color of, and data-coloris the color you would like to change it to.
.button是应用于按钮data-class的类，为您想要更改其背景颜色的类添加，并且data-color是您想要将其更改为的颜色。
