類的名字通過數組在javascript

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"+ " "]，does not工作如何實現這一目標？

當我從div刪除班，這會再次工作？

Answer 1

爲了達到預期的效果，請使用以下選項

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

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

Answer 2

你找錯了值...

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

類名是「紅色」，「綠色two_in」和「藍one_in」

您需要完全匹配的類名。

與jQuery不同，classNames對於你來說不是很好的排序，到一個數組中，它們是你輸入到HTML中的原始字符串（這就是爲什麼即使「紅色」也不起作用）。

我建議你使用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 3

的代碼不會因爲你的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>

Answer 4

因爲.className給你的所有類的名稱。例如green two_in而你想要的只是​​。因此，你應該添加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>