5 DIV Boxes - заливка цветом с использованием querySelector и addEventListener - PullRequest
Новая
       14

5 DIV Boxes - заливка цветом с использованием querySelector и addEventListener

0 голосов
/ 30 июня 2018

У меня было это на экзамене. Я не могу найти способ решить эту проблему 

 <head>
    <style>
        div {
            border:1px solid black;
            display:inline-block;
            width: 150px;
            height:150px;
            margin-right: 50px;
        }
        .color {
            background-color:rgb(48, 241, 0);
        }
        </style>
    </head>
    <body>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>

        <!-- script -->

        <script src='coloring.js'></script>
    </body>

Что мне нужно сделать, это использовать CSS-класс .color в JS и простым щелчком мыши нарисовать один из элементов DIV. После того, как я щелкну по другому DIV, он закрасит этот зеленый, а с другого исчезнет. Если ты меня поймешь. Я хотел бы получить совет или решение. Помогите ребята

Спасибо !!!

Ответы [ 2 ]

0 голосов
/ 30 июня 2018

При нажатии div сначала удалите класс (color) из всех div (если есть). Затем добавьте класс (color) только к нажатым div. Попробуйте следующий способ, используя Document.querySelectorAll(): 

var div = document.querySelectorAll('div');
document.querySelectorAll('div').forEach(function(d){
  d.addEventListener('click', function(){
    div.forEach(function(el){
      el.classList.remove('color');
    })
    this.classList.add('color');
  });
});
div {
  border:1px solid black;
  display:inline-block;
  width: 150px;
  height:150px;
  margin-right: 50px;
}
.color {
  background-color:green;
}
<body>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</body>
0 голосов
/ 30 июня 2018

Получите все div и прикрепите к ним событие click, а внутри обработчика события получите div, имеющий класс color. Используйте classList.remove для удаления класса цвета из него, затем используйте объект event для получения текущей цели и используйте classList.add для добавления color класса 

let getDiv = document.querySelectorAll('div');
getDiv.forEach(function(item) {

  item.addEventListener('click', function(e) {
    let getDivWithBcgColor = document.querySelector('.color');
    if (getDivWithBcgColor !== null) {
      getDivWithBcgColor.classList.remove('color')
    }
    e.target.classList.add('color')

  })


})
div {
  border: 1px solid black;
  display: inline-block;
  width: 150px;
  height: 150px;
  margin-right: 50px;
}

.color {
  background-color: rgb(48, 241, 0);
}
<body>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</body>
...