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 (три DIV которого 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>