更改具有相同类的所有元素的背景颜色

Question

我有一个链接和一个具有匹配类的表行。单击链接时，我想更改具有相同类别的行的背景颜色。对于每种情况，只有一行具有相同的类别。

这是我当前的功能。

    <script type="text/javascript">

function check(x) {
    elements = document.getElementsByClassName(x);
    for (var i = 0; i < elements.length; i++) {
        elements[i].bgColor="blue";
    }
}
</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>

表行有两个类，我需要第二个（数字）来解决问题。当前代码给出错误“指定了无效或非法的字符串”

原文由 john cs 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

你有几个错误。您将类与 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>

检查这个 jsfiddle

原文由 drinchev 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

您也可以在没有 jQuery 的情况下使用 querySelectorAll() 轻松完成此操作：

 <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>

原文由 antoyo 发布，翻译遵循 CC BY-SA 3.0 许可协议