Показать / Скрыть div в зависимости от результата объекта JavaScript - PullRequest
Новая
       57

Показать / Скрыть div в зависимости от результата объекта JavaScript

1 голос
/ 01 ноября 2019

У меня есть 5 скрытых элементов, которые можно отобразить только в том случае, если элементы объекта являются истинными. 

    .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; 
});

Как отфильтровать все истинные элементы, как показать только соответствующие элементы?

Ответы [ 3 ]

1 голос
/ 01 ноября 2019

Измените метод фильтрации на этот 

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

0 голосов
/ 01 ноября 2019

Это будет работать: перебирайте свойства и изменяйте стиль идентификатора на блокировку, если ключ верен. 

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'
        }
    }
}
0 голосов
/ 01 ноября 2019

Вы можете использовать DOM селектор , чтобы изменить 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>
...