Question

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

现在，我向父级添加了一个事件监听器，它扩展了一个的宽度，并减小了另一个的宽度，因此它们都适合。但是，当我点击父div时，我希望该特定div的孩子添加一个类并从另一个中删除一个类2.我似乎无法弄明白。这是代码。对不起，如果我的格式很差，第一次发布堆栈溢出并且我用Google搜索并搜索所有内容以获得答案，而且似乎无法找到答案。

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 1}};但.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>

如果您不需要支持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的第二个参数。

Javascript只将addEventListener添加到父级和子级的父级样式

1 个答案: