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

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>

data1

data2

- john cs

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

---

这对我来说看起来是最好的选择，没有保留奇怪的id/class混合的理由，而且对于如此简单的操作来说，jQuery过于复杂了。 - Bubbles

抱歉，我不小心发布了错误的代码。只有一个最后的问题...我意识到每一行都分配了两个类...脚本自动分配第一个类，并添加另一个由空格分隔的类。我该如何处理这种情况？我总是想将第二个类发送到此函数。 - john cs

只需将this.className替换为this.className.split(' ')[1]。 - drinchev

我在设置元素的那一行遇到了“指定了无效或非法的字符串”的错误。我刚刚使用我的更新代码和实际输出修改了原始帖子，而不是示例。 - john cs

我曾经使用错误的答案JS代码，但现在它已经运行正常了，谢谢！ - john cs

Answer 2

您也可以使用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>

- antoyo

Answer 3

jQuery简化了它：

$(".button").click(function(){
 var class = $(this).attr("data-class");
 var color = $(this).attr("data-color");
 $("."+class).css("background-color",color);
});

.button是应用于按钮的类，添加 data-class 以更改背景颜色所需的类，data-color 是您想要更改为的颜色。

- Mooseman

---

我对jQuery还比较新，但有两个问题。首先，我该如何动态创建它？所有的类名都将由脚本创建。另外，在尝试测试时，我遇到了一个错误“参数列表后缺少”)”。 - john cs

更新了。另外注意：在页面上不要多次使用相同的“id”，这是无效的。 - Mooseman

Answer 4

我遇到了同样的问题。需要在纯JS中更改所有元素的背景（暗色主题）。由于某些奇怪的错误（此文档需要“TrustedHTML”分配），无法在页面上添加jQuery。

elements = document.querySelectorAll("*");
for (var i = 0; i < elements.length; i++) {
    elements[i].style.backgroundColor="#777";
    elements[i].style.color="#ddd";
}

- Hebe