javascript - 如何同时多次运行一个函数，将参数传递给具有相同类名的div

Question

我简化了我的代码以便于理解。我想运行一个动画函数，同时传递 div 的值。当我把它放在循环中时，我什么也做不了。间隔继续，错误信息等

如果它正常工作，我必须看到这个输出。

"30, 60, 90, 1. dial => i: 0, val: 60, 2. dial => i: 0, val: 60, 3. dial => i: 0, val: 90, 1 . dial => i: 1, val: 30, 2. dial => i: 1, val: 60, 3. dial => i: 1, val: 90, 1. dial => i: 2, val: 30 , 2. dial => i: 2, val: 60, ..."

我更改了要正确打印的 View 。 :(

var result = document.querySelector(".result");
var dial = document.querySelectorAll('.dial');
var i = j = x = 0;
var val;

for (x = 0; x < dial.length; x++) {
  secDiv = dial[x].querySelector('.itemContainer > .sq');
  val = dial[x].querySelector('.itemContainer > span').getAttribute("per");
  result.innerHTML += val + ", ";

  //myInterval = setInterval(function() { cevir(x); }, 25);  // This is the line what I get errors  
}

myInterval = setInterval(function() {
  cevir(1);
}, 25);

function cevir(m) {
  dial = document.querySelectorAll('.dial');
  var val = dial[m].querySelector('span').getAttribute("per");
  result.innerHTML += "<br/> " + m + ". dial =>  i: " + i + ", val: " + val;

  if (i < val) {
    dial[m].querySelector('.sq').style.opacity = (i / 100);
    dial[m].querySelector('.sq').style.transform = "rotate(" + (i * 2) + "deg)";
  } else if (i == val) {
    clearInterval(myInterval);
  }
  i++;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'exo 2', sans-serif;
}

body {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(45deg, #2ecc71, #16a085);
}

.dial {
  position: relative;
  width: 100px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 10px 0 10px;
}

.itemContainer {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background-color: #fff;
}

.sq {
  position: absolute;
  background-color: red;
  width: 70%;
  height: 70%;
  opacity: 0;
}

.result {
  position: absolute;
  top: 0px;
  left: 0px;
  padding: 5px;
  //background-color : silver;
}

<div class="dial">
  <div class="itemContainer">
    <span per="30"></span>
    <div class="sq">
    </div>
  </div>
</div>

<div class="dial">
  <div class="itemContainer">
    <span per="60"></span>
    <div class="sq">
    </div>
  </div>
</div>

<div class="dial">
  <div class="itemContainer">
    <span per="90"></span>
    <div class="sq"></div>
  </div>
</div>

<div class="result"></div>

Answer 1

有几个错误。请参阅下面固定代码中的注释:

var result = document.querySelector(".result");
var dial = document.querySelectorAll('.dial');
var i = j = /*x =*/ 0; // <---------------- don't declare x here
var val;

//    🡓 declare it here
for (let x = 0; x < dial.length; x++) {
  val = dial[x].querySelector('.itemContainer > span').getAttribute("per");
  result.innerHTML += val + ", ";
  // 🡓 declare your interval here       &     pass it here 🡓
  const myInterval = setInterval(function() { cevir(x, myInterval); }, 25);
}

// so it is passed here 🡓
function cevir(m, myInterval) {
  dial = document.querySelectorAll('.dial');
  var val = dial[m].querySelector('span').getAttribute("per");
  result.innerHTML += "<br/> " + m + ". dial =>  i: " + i + ", val: " + val;

  if (i < val) {
    dial[m].querySelector('.sq').style.opacity = (i / 100);
    dial[m].querySelector('.sq').style.transform = "rotate(" + (i * 2) + "deg)";
  } else if (i == val) {
    // And accessible here 🡓
    clearInterval(myInterval);
  }
  i++;
}

<!-- Unchanged HTML & CSS -->                                                                                                                                               <div class="dial"><div class="itemContainer"> <span per="30"></span><div class="sq"></div></div></div><div class="dial"><div class="itemContainer"> <span per="60"></span><div class="sq"></div></div></div><div class="dial"><div class="itemContainer"> <span per="90"></span><div class="sq"></div></div></div><div class="result"></div><style>*{margin:0;padding:0;box-sizing:border-box;font-family:'exo 2',sans-serif}body{width:100%;height:100vh;display:flex;justify-content:center;align-items:center;background:linear-gradient(45deg,#2ecc71,#16a085)}.dial{position:relative;width:100px;height:100px;display:flex;justify-content:center;align-items:center;margin:0 10px 0 10px}.itemContainer{position:absolute;width:100%;height:100%;display:flex;justify-content:center;align-items:center;border-radius:50%;background-color:#fff}.sq{position:absolute;background-color:red;width:70%;height:70%;opacity:0}.result{position:absolute;top:0;left:0;padding:5px}</style>