为什么 div inside div 的颜色没有通过 JavaScript 数组改变

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>

我想把two_in里面的所有div颜色分别改成蓝色，three_in改成绿色，four_in改成红色，缺少的代码是什么？谁能解释一下？

示例：

two_in里面的所有div（三个div的divclass是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>

为什么 div inside div 的颜色没有通过 JavaScript 数组改变

Why div inside div is color is not changing through JavaScript array

javascript

selectors-api