有一个活动/切换点击事件，点击时忽略具有相同 CSS Class 的同级元素

Question

我在页面上有一些元素，我想要它，所以当我单击其中一个时，一个特定的子元素被删除，当重新单击该元素时，子元素又回来了。

我通常会通过单击事件来执行此操作，该事件会添加一个“.active”CSS class，可以根据变量当前显示的是真还是假来添加和删除if/else 声明。

这次的问题是因为我有多个元素我不能真正使用“.active”class 因为如果有多个元素 'active' 它会删除或重新添加子元素不同父元素内的元素，而不是仅被单击的元素。

在我想要的示例代码中，当我单击一个红色框时，黄色框仅在该框中消失，当我重新单击该特定父（红色）框时，子元素仅重新出现在该特定父框中如果点击了多个红框。

因为这会影响相当多的元素，所以我不能真正添加 ID 和编写单独的函数。

代码笔：https://codepen.io/emilychews/pen/MWJYMEY

var boxOuter = document.querySelectorAll(".box-outer"),
    boxInner = document.querySelectorAll(".box-inner");

if (boxOuter) {
  boxOuter.forEach(function (item) {
    item.addEventListener("click", function () {
      // code
    });
  });
}

body {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 120vh;
}

.box-outer {
  position: relative;
  width: 10rem;
  height: 5rem;
  background: red;
  margin: 1rem;
  cursor: pointer;
}

.box-inner {
  width: 1rem;
  height: 1rem;
  background: yellow;
  position: absolute;
  bottom: 0.5rem;
  right: 0.5rem;
}

<main class="main-wrapper">
  <div class="box-outer">
    <div class="box-inner"></div>
  </div>
  <div class="box-outer">
    <div class="box-inner"></div>
  </div>
  <div class="box-outer">
    <div class="box-inner"></div>
  </div>
</main>

Answer 1

您可以 toggle 在 box-outer 上添加 class onclick，在 CSS 中，如果 box-outer 有 [= active 的 44=] 然后隐藏 box-inner.

Javascript:

item.classList.toggle("active");

CSS:

.box-outer.active .box-inner {
  opacity: 0;
}

var boxOuter = document.querySelectorAll(".box-outer"),
  boxInner = document.querySelectorAll(".box-inner");

if (boxOuter) {
  boxOuter.forEach(function(item) {
    item.addEventListener("click", function() {
      item.classList.toggle("active");
    });
  });
}

body {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 120vh;
}

.box-outer {
  position: relative;
  width: 10rem;
  height: 5rem;
  background: red;
  margin: 1rem;
  cursor: pointer;
}

.box-inner {
  width: 1rem;
  height: 1rem;
  background: yellow;
  position: absolute;
  bottom: 0.5rem;
  right: 0.5rem;
}

.box-outer.active .box-inner {
  opacity: 0;
}

<main class="main-wrapper">
  <div class="box-outer">
    <div class="box-inner"></div>
  </div>
  <div class="box-outer">
    <div class="box-inner"></div>
  </div>
  <div class="box-outer">
    <div class="box-inner"></div>
  </div>
</main>

Check it in action on codepen

有一个活动/切换点击事件，点击时忽略具有相同 CSS Class 的同级元素

Have An Active / Toggle Click Event That Ignores Sibling Elements With The Same CSS Class When Clicked

javascript

events

this

dom-events