Question

var ar = ['.two_in','.three_in','.four_in'], pb = "> *"; 
 
    ar.forEach(function(x){  
 
    var sel = document.querySelectorAll(x + pb); 
 
    
 
     var colors = {};  
 
     colors[ar[0]] = 'blue'; 
 
     colors[ar[1]] = 'green'; 
 
     colors[ar[2]] = 'red'; 
 
     
 
    for(var i = 0;i<sel.length;i++){ 
 
    sel[i].style.backgroundColor = colors[sel[i].className]; 
 
    } 
 
    })

<div class="two_in"> 
 
    <div class="demo">blue</div> 
 
    <div class="demo">blue</div> 
 
    <div class="demo">blue</div> 
 
</div> 
 
<br> 
 
<div class="three_in"> 
 
    <div class="demo">green</div> 
 
    <div class="demo">green</div> 
 
    <div class="demo">green</div> 
 
</div> 
 
<br> 
 

 
<div class="four_in"> 
 
    <div class="demo">red</div> 
 
    <div class="demo">red</div> 
 
    <div class="demo">red</div> 
 
</div>

我想改變這一切的div顏色裏面two_in藍色，three_in爲綠色，並four_in分別爲紅色，有什麼遺漏碼？任何人都可以解釋嗎？

實施例：

的所有DIV中two_in（3格其DIV類是demo）應爲藍色的顏色和作爲three_in和four_in。

Answer 1

這裏是錯誤：

colors[ar[0]] = 'blue'; 
colors[ar[1]] = 'green'; 
colors[ar[2]] = 'red'; 

它有分配非本原指標。你需要的是：

var ar = ['.two_in', '.three_in', '.four_in'], 
 
    pb = " > *"; 
 
ar.forEach(function(x) { 
 
    var sel = document.querySelectorAll(x + pb); 
 
    var colors = {}; 
 
    colors[0] = 'blue'; 
 
    colors[1] = 'green'; 
 
    colors[2] = 'red'; 
 

 
    for (var i = 0; i < sel.length; i++) { 
 
    sel[i].style.backgroundColor = colors[i]; 
 
    } 
 
})

<div class="two_in"> 
 
    <div class="demo">blue</div> 
 
    <div class="demo">blue</div> 
 
    <div class="demo">blue</div> 
 
</div> 
 
<br> 
 
<div class="three_in"> 
 
    <div class="demo">green</div> 
 
    <div class="demo">green</div> 
 
    <div class="demo">green</div> 
 
</div> 
 
<br> 
 
<div class="four_in"> 
 
    <div class="demo">red</div> 
 
    <div class="demo">red</div> 
 
    <div class="demo">red</div> 
 
</div>

就是上面你想要什麼？或者，如果你需要基於文本的顏色，然後...

var ar = ['.two_in', '.three_in', '.four_in'], 
 
    pb = " > *"; 
 
ar.forEach(function(x) { 
 
    var sel = document.querySelectorAll(x + pb); 
 
    var colors = {}; 
 
    colors['blue'] = 'blue'; 
 
    colors['green'] = 'green'; 
 
    colors['red'] = 'red'; 
 

 
    for (var i = 0; i < sel.length; i++) { 
 
    sel[i].style.backgroundColor = colors[sel[i].innerHTML.trim()]; 
 
    } 
 
})

<div class="two_in"> 
 
    <div class="demo">blue</div> 
 
    <div class="demo">blue</div> 
 
    <div class="demo">blue</div> 
 
</div> 
 
<br> 
 
<div class="three_in"> 
 
    <div class="demo">green</div> 
 
    <div class="demo">green</div> 
 
    <div class="demo">green</div> 
 
</div> 
 
<br> 
 
<div class="four_in"> 
 
    <div class="demo">red</div> 
 
    <div class="demo">red</div> 
 
    <div class="demo">red</div> 
 
</div>