javascript - 访问嵌套元素

Question

我使用多个带有公共(public)类的按钮。当用户单击任何按钮时，我想让具有另一个类的元素填充为红色。

所以基本上我想为 .wrapper 内具有 .col 类的所有内容着色。

这就是我到目前为止所拥有的。

var clickMe = document.querySelectorAll('.common');
for (var i = 0; i < clickMe.length; i++) {
  clickMe[i].addEventListener('click', function (event) {

    var x = document.querySelectorAll('#wrapper svg .col'); //this is where my issue starts.
    x.style.fill = "red";

  }, false);
}

寻找纯 JavaScript 解决方案。

Answer 1

类似以下内容应该适合您:

var clickMe = document.querySelectorAll('.common');
for (var i = 0; i < clickMe.length; i++) {
  clickMe[i].addEventListener('click', function (event) {

    var x = document.querySelectorAll('#wrapper svg .col'); //this is where my issue starts.
    for(var j=0;j<x.length;j++){
      x[j].style.fill = "red";
    }


  }, false);
}