javascript - 遍历父容器的子容器

Question

我有 2 组父容器，每组都有 5 个子容器 -- 每个容器有 4 个段落和 2 个按钮。

单击每个容器中的按钮时，将向段落元素添加一个类，一次添加一个。到达最后一个段落子元素后，第一个段落子元素再次获得添加到它的类。

下面是代码。当到达最后一段时，我希望该类立即添加到第一段——但计数器不会重置。如果您检查 console.log，计数器和 j 都会转到 4，这是不应该的。 counter 和 j 都达到 3 后，它应该重置回 0。我的参数可能偏离了。

var container = document.querySelectorAll(".container");
var button = document.querySelectorAll("button");
var p = document.querySelectorAll("p");

var click = function(i) {
  var counter = -1;
  button[i].addEventListener("click", function() {
    counter++;
    console.log(counter);

    for (j = 0; j < p.length / 2 + 1; j++) {
      console.log(i, j);
      this.parentNode.children[j].classList.remove("active");
      if (j === counter) {
        this.parentNode.children[j].classList.add("active");
      }
      if (counter === p.length / 2) {
        counter = -1;
      }
    }
  });
}

for (i = 0; i < button.length; i++) {
  click(i);
}

.active {
  background-color: red;
}

<div class="container">
  <p>Test1</p>
  <p>Test2</p>
  <p>Test3</p>
  <p>Test4</p>
  <button>click</button>
</div>

<div class="container">
  <p>Test1</p>
  <p>Test2</p>
  <p>Test3</p>
  <p>Test4</p>
  <button>click</button>
</div>

Answer 1

在递增后立即加一个模4运算就够了:

counter %= 4;

因为段落的数量可能会改变，你可以即时计算它们的数量:

var maxParagrapgh = button[i].parentNode.querySelectorAll('p').length;

所以增量是:

counter = (counter + 1) % maxParagrapgh;

运行片段:

window.addEventListener('DOMContentLoaded', function(e) {
    var container = document.querySelectorAll(".container");
    var button = document.querySelectorAll("button");
    var p = document.querySelectorAll("p");

    var click = function(i){
        var counter = -1;
        var maxParagrapgh = button[i].parentNode.querySelectorAll('p').length;
        button[i].addEventListener("click", function(){
            counter = (counter + 1) % maxParagrapgh;
            // console.log(counter);

            for(j=0;j<p.length/2+1;j++){
                // console.log(i, j);
                this.parentNode.children[j].classList.remove("active");
                if(j === counter){
                    this.parentNode.children[j].classList.add("active");
                }
                if(counter === p.length/2){
                    counter = -1;
                }
            }
        });
    }

    for(i=0;i<button.length;i++){
        click(i);
    }
})

.active {
    background-color: red;
}

<div class="container">
    <p>Test1</p>
    <p>Test2</p>
    <p>Test3</p>
    <p>Test4</p>
    <button>click</button>
</div>

<div class="container">
    <p>Test1</p>
    <p>Test2</p>
    <p>Test3</p>
    <p>Test4</p>
    <button>click</button>
</div>