Show/Hide div 取决于 JavaScript 对象的结果

Question

我有 5 个隐藏的 div，只有在对象项为真时才能显示。

    .colors{
      display: none;
    }

 <div class="colors" id="blue">BLUE</div>
 <div class="colors" id="red">RED</div>
 <div class="colors" id="green">GREEN</div>
 <div class="colors" id="yellow">YELLOW</div>

var colors = { blue:false, red:false, green:true, yellow:true};


var colorsTrue = Object.keys(colors).filter((key)=> {
    return colors[key] !== false; 
});

过滤掉所有真实项后，如何只显示对应的div？

Answer 1

您可以使用 DOM selector 根据颜色值更改每个 div 的 css：

var colors = {
  blue: false,
  red: false,
  green: true,
  yellow: true
};


Object.keys(colors).forEach(key => {
  document.getElementById(key).style.display = colors[key] ? 'block' : 'none';
});

.colors {
  display: none;
}

<div class="colors" id="blue">BLUE</div>
<div class="colors" id="red">RED</div>
<div class="colors" id="green">GREEN</div>
<div class="colors" id="yellow">YELLOW</div>

Answer 2

将您的过滤方法更改为此

for(let key in colors) {
    if(colors[key] == true) {
    document.getElementById(key).style.display = "block"
  }
}

检查 JsBin https://jsbin.com/gotiqaq/edit?html,css,js,output

Answer 3

这将起作用：遍历属性并将 id 样式更改为在键为真时阻止。

var colors = { blue: false, red: false, green: true, yellow: true };

for (var color in colors) {
    if (colors.hasOwnProperty(color)) {
        if(colors[color]) {
          document.querySelector(`#${color}`).style.display='block'
        }
    }
}

Show/Hide div 取决于 JavaScript 对象的结果

Show/Hide divs depending on the result of the JavaScript object

javascript

css

dom

show