javascript - 如何应用影响具有特定类名的每个元素的父级的函数？

Question

我有一系列div带有类名的 sx在其他div带有类名的 s 中item。s 在 main的item div一个部分内。

我想要做的是创建一个函数，通过影响它们各自的父类（在这种情况下更改它们的 CSS）来平等地应用于每个x类。div

我编码了这个：

var openbtn = document.getElementsByClassName("x")[0];
openbtn.onclick = function() {
    document.body.parentElement.style.backgroundColor = "red";
}

但是，这只适用于x头等舱<div>。当它工作时，它会改变部分的背景颜色，或者主要或主体元素，而不是x类div父类（item类 div）。

标签： javascripthtml

Answer 1

如果要在每个.x元素上使用处理程序来处理此问题，则必须为每个元素添加处理程序.x。（但您可能不想这样做，请继续阅读。）看起来像这样：

var openbtns = document.getElementsByClassName("x");
for (var n = 0; n < openbtns.length; ++n) {
    openbtns[n].addEventListener("click", xClickHandler);
}

... wherexClickHandler使用this(or event.currentTarget) 知道.x点击了哪个元素：

function xClickHandler() {
    this.parentElement.style.backgroundColor = "red"; // I suggest using a class instead of doing this, btw
}

但是，如果所有这些.x元素都在同一个整体容器中，您可以使用事件委托来做到这一点，如下所示：

document.querySelector("selector-for-the-overall-container").addEventListener("click", function(event) {
    // Find the `.x` that was clicked (which may be `event.target` or may be
    // an ancestor node of it
    var x = event.target.closest(".x");
    if (x && this.contains(x)) {
        x.parentElement.style.backgroundColor = "red"; // Again, suggest using a class
    }
});

更多的：

• closest
• contains

使用您评论中的 HTML 的实时示例：

document.getElementById("items").addEventListener("click", function(event) {
    // Find the `.x` that was clicked (which may be `event.target` or may be
    // an ancestor node of it
    var x = event.target.closest(".x");
    if (x && this.contains(x)) {
        x.parentElement.style.backgroundColor = "red"; // Again, suggest using a class
    }
});

.x {
  display: inline-block;
  width: 10px;
  height: 10px;
  background-color: blue;
}
section {
  background-color: yellow;
  padding: 8px;
}

<main id="items">
  <section id="design">
    <div class="item">
      <div class="x"></div>
      <h1>Design stuff</h1>
    </div>
  </section>
  <section id="art">
    <div class="item">
      <h1>Art stuff</h1>
      <div class="x"></div>
    </div>
  </section>
</main>