Question

我在考试中有这个。我找不到解决此问题的方法

 <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>

我在这里需要做的是在JS中使用CSS类.color，并单击一下即可绘制DIV元素之一。在我单击另一个DIV之后，他用绿色漆了，然后消失了。如果你了解我我希望有一些提示或解决方案。伙计们

谢谢！

Answer 1

获取所有div并将click事件附加到它们上，然后在事件处理程序中获取具有类color的div。使用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>

Answer 2

在单击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>

5个DIV框-使用querySelector和addEventListener填充颜色

2 个答案: