Question

var ar = ["blue", "green", "red"],
    x = document.getElementsByTagName('DIV'),
    i,
    colors = {};

colors[ar[0]] = 'blue';
colors[ar[1]] = 'green';
colors[ar[2]] = 'red';

for (i = 0 ; i < x.length ; i++) {
    x[i].style.backgroundColor = colors[x[i].className];
}

.one_in,.two_in ,three_in{ width:100px; height:100px; border:1px solid #000; }

<div class="blue one_in">
</div><div class="green two_in">
</div><div class="one_in">
</div><div class="red "></div>

当我放置多个类和空格时，为什么不起作用，如果我在数组["blue" + " ", "green" + " ", "red"+ " "]中放置空格，是不是如何实现这个？

当我从div删除课程时，这会再次起作用吗？

Answer 1

因为.className为您提供了所有类的名称。例如green two_in，而您想要的只是green。因此，您应该将one_in添加为该div的id

var ar = ["blue", "green","white", "red"],
    x = document.querySelectorAll('div'),i,colors = {};

colors[ar[0]] = 'blue';
colors[ar[1]] = 'green';
colors[ar[2]] = 'white';
colors[ar[3]] = 'red';

for (i = 0 ; i < x.length ; i++) {
    x[i].style.backgroundColor = colors[x[i].className];
}

#one_in,#two_in,#three_in{
  width:100px;
  height:100px;
  border:1px solid #000; }

<div class="blue" id="one_in">
</div><div class="green"id="two_in">
</div><div id="one_in">
</div><div class="red" id="three_in">
</div>

Answer 2

要达到预期效果，请使用以下选项

x[i].style.background = colors[x[i].className.split(' ')[0]];

http://codepen.io/nagasai/pen/rWgPRj

Answer 3

您正在寻找错误的价值......

x[i].style.backgroundColor = colors[x[i].className];

班级名称是＆＃34;红色＆＃34;，＆＃34;绿色two_in＆＃34;和＆＃34;蓝色one_in＆＃34;

您需要完全匹配类名。

与jQuery不同，classNames没有很好地为你排序，在数组中，它们是你在HTML中键入的原始字符串（这就是为什么即使是＆＃34; red＆＃34;不工作。

我建议您使用jQuery快速解决方案

或者你可以这样做：

for (i = 0 ; i < x.length ; i++) {
    classNames = x[i].style.split(" ");
    for (var j = classNames.length; j--;) if (colors[classNames[j]]) {
        x[i].style.backgroundColor = colors[classNames[j]];
    }
}

Answer 4

代码不会，因为没有与className属性完全匹配的属性。

要解决此问题，请使用String#split方法从类名中获取第一个类名。

var ar = ["blue", "green", "red"],
  x = document.getElementsByTagName('DIV'),
  i,
  colors = {};

colors[ar[0]] = 'blue';
colors[ar[1]] = 'green';
colors[ar[2]] = 'red';

for (i = 0; i < x.length; i++) {
  x[i].style.backgroundColor = colors[x[i].className.split(" ")[0]];
}

.one_in,
.two_in,
.three_in {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
}

<div class="blue one_in">
</div>
<div class="green two_in">
</div>
<div class="one_in">
</div>
<div class="red three_in"></div>

类在javascript中通过数组命名

4 个答案: