Javascript 仅将 addEventListener 添加到父样式，父子样式都不同

Question

目前有一个 div 控制元素的宽度以及背景颜色。该 div 有一个子 div，其内容是半透明的。这就是为什么我需要第一个 div。所以背景很扎实。

现在，我向父级添加了一个事件监听器，它扩展了一个的宽度并减小了另外 2 个的宽度，以便它们都适合。但是，当我单击父 div 时，我希望该特定 div 的子级添加一个类并从其他 2 个中删除一个类。我似乎无法弄清楚。这是代码。抱歉，如果我的格式很差，第一次在堆栈溢出上发帖，我用谷歌搜索了所有内容以寻找答案，但似乎找不到答案。

var purchaseStepCont = document.querySelectorAll(".step-container");
var purchaseStep = document.querySelectorAll(".step");

for (var i = 0; i < purchaseStepCont.length; i++) {
  purchaseStepCont[i].addEventListener("click", function() {
    for (var i = 0; i < purchaseStepCont.length; i++) {
      purchaseStepCont[i].classList.remove("stepContActive");
      purchaseStepCont[i].classList.add("stepContDeactive");
      this.classList.add("stepContActive");
      this.classList.remove("stepContDeactive");
    }
  });
}

<div class="step-container">
  <div class="step">
    <h1>01.</h1>
    <h3>words</h3>
    <p>wods</p>
  </div>
</div>
<div class="step-container">
  <div class="step">
    <h1>01.</h1>
    <h3>words</h3>
    <p>wods</p>
  </div>
</div>
<div class="step-container">
  <div class="step">
    <h1>01.</h1>
    <h3>words</h3>
    <p>wods</p>
  </div>
</div>

Answer 1

你非常接近。但是如果要将类添加到 .step，则需要 this.firstElementChild.classList.add(...) 而不是 this.classList。 add(...)(因为 this 将是 .step-container，而不是 .step；但是 .step 是它的第一个子元素)。或者为了获得更大的标记灵 active ，您可以使用 this.querySelector(".step")。

您也可以只使用一个事件处理函数，而不是在循环中重新创建它:

var purchaseStepCont = document.querySelectorAll(".step-container");
var purchaseStep = document.querySelectorAll(".step");
function clickHandler() {
  var thisStep = this.firstElementChild; // Or this.querySelector(".step") would be more flexible
  for (var i = 0; i < purchaseStep.length; i++) {
    if (purchaseStep[i] === thisStep) {
      purchaseStep[i].classList.add("stepContActive");
      purchaseStep[i].classList.remove("stepContDeactive");
    } else {
      purchaseStep[i].classList.remove("stepContActive");
      purchaseStep[i].classList.add("stepContDeactive");
    }
  }
}

for (var i = 0; i < purchaseStepCont.length; i++) {
  purchaseStepCont[i].addEventListener("click", clickHandler);
}

.stepContActive {
  color: blue;
}
.stepContDeactive {
  color: #ddd;
}

<div class="step-container">
  <div class="step">
    <h1>01.</h1>
    <h3>words</h3>
    <p>wods</p>
  </div>
</div>
<div class="step-container">
  <div class="step">
    <h1>01.</h1>
    <h3>words</h3>
    <p>wods</p>
  </div>
</div>
<div class="step-container">
  <div class="step">
    <h1>01.</h1>
    <h3>words</h3>
    <p>wods</p>
  </div>
</div>

如果您不需要支持 IE11，

clickHandler 可以更短一些:

function clickHandler() {
  var thisStep = this.firstElementChild; // Or this.querySelector(".step") would be more flexible
  for (var i = 0; i < purchaseStep.length; i++) {
    purchaseStep[i].classList.toggle("stepContActive", purchaseStep[i] === thisStep);
    purchaseStep[i].classList.toggle("stepContDeactive", purchaseStep[i] !== thisStep);
  }
}

但是 IE11 不支持 classList.toggle 的第二个参数。