JavaScript仅对父母和孩子的父级风格只有不同的方式

Question

当前有一个DIV，该DIV控制元素的宽度以及背景颜色。该Div的儿童DIV具有半透明的内容。这就是为什么我需要第一个Div。因此背景是固体的。

现在，我向父母添加了一个事件侦听器，该侦听器扩大了一个宽度并减小了另一个2的宽度，因此它们都适合。但是，当我单击父级时，我希望该特定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是其第一个元素子）。或为了获得更多标记灵活性，您可以使用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>

clickHandler如果您不需要支持IE11：

，可能会短一些

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的第二个参数。