单击子元素时影响父元素

Question

这是我的代码：

＆＃13;

＆＃13;

function qaw(elem) {
  mydiv = document.getElementsByClassName("mydiv");
  for (i = 0; i < mydiv.length; i++) {
    mydiv[i].style.backgroundColor = "red";
    elem.style.backgroundColor = "#fff";
  }
  button = document.querySelector(".btn");
  for (i = 0; i < button.length; i++) {
    button.addEventListener('click', function() {
      mydiv[i].style.backgroundColor = "blue";
    });
  }
}

＆＃13;

<div class="mydiv" onclick="qaw(this)" id="">
  <div class="btn"><a href="javascript:void">click</a>
  </div>
</div>
<div class="mydiv" onclick="qaw(this)" id="">
  <div class="btn"><a href="javascript:void">click</a>
  </div>
</div>
<div class="mydiv" onclick="qaw(this)" id="">
  <div class="btn"><a href="javascript:void">click</a>
  </div>
</div>
<div class="mydiv" onclick="qaw(this)" id="">
  <div class="btn"><a href="javascript:void">click</a>
  </div>
</div>
<div class="mydiv" onclick="qaw(this)" id="">
  <div class="btn"><a href="javascript:void">click</a>
  </div>
</div>
<div class="mydiv" onclick="qaw(this)" id="">
  <div class="btn"><a href="javascript:void">click</a>
  </div>
</div>
<div class="mydiv" onclick="qaw(this)" id="">
  <div class="btn"><a href="javascript:void">click</a>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

我希望所有mydiv类元素的背景在任何btn类元素上单击时变为蓝色。无论如何都要找到它。

Answer 1

将最后一位改为：

button = document.querySelector(".btn");
for(i=0;i<button.length;i++){
button.addEventListener('click', function(){
    for(j=0;j<mydiv.length;j++){
        mydiv[j].style.backgroundColor = "blue";
    }
});

这使得当按下任何按钮时，所有div都使用for循环设置为蓝色，而不是仅使用按钮的特定按钮。

Answer 2

创建一个将所有div更改为蓝色的函数：

var divs = document.querySelectorAll(".myDivs");

function changeAll() {
    [].forEach.call(divs, function(el) {
        el.style.backgroundColor = "blue";
    });
}

将此功能分配给每个按钮点击事件。

完成：

＆＃13;

＆＃13;

var btns = document.querySelectorAll(".btn");
var myDivs = document.querySelectorAll(".myDiv");

function changeAll() {
  [].forEach.call(myDivs, function(div) {
    div.style.backgroundColor = "lightblue";
  });
}

[].forEach.call(btns, function(btn) {
  btn.addEventListener("click", changeAll);
});

＆＃13;

<div class="myDiv">
  <div class="btn"><a href="#">Click me</a>
  </div>
</div>
<div class="myDiv">
  <div class="btn"><a href="#">Click me</a>
  </div>
</div>
<div class="myDiv">
  <div class="btn"><a href="#">Click me</a>
  </div>
</div>
<div class="myDiv">
  <div class="btn"><a href="#">Click me</a>
  </div>
</div>
<div class="myDiv">
  <div class="btn"><a href="#">Click me</a>
  </div>
</div>
<div class="myDiv">
  <div class="btn"><a href="#">Click me</a>
  </div>
</div>
<div class="myDiv">
  <div class="btn"><a href="#">Click me</a>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;