遍历函数中的变量名

Question

我的页面上有几个倒计时，我在下面找到了这个脚本，我试图修改它以迭代原始脚本，以便显示几个倒计时。

例如，我在<div id="dateHere1"></div>、<div id="dateHere2"></div>、<div id="dateHere3"></div> 等有一个倒计时...

这就是为什么我需要使用从 1 到 10 的数字来遍历以下函数。如何将字符串 str（即 10）添加到函数中的变量名？

var str = 10;

for (i = 0; i < str; i++) { 
    addEventsHereAndThere([i]);

}



function addEventsHereAndThere(number) {
// Set the date we're counting down to
var theCorrectDate.number = document.querySelector('#thisIsTheDate'.number).value;
var countDownDate.number = new Date(theCorrectDate.number).getTime();

// Update the count down every 1 second
var x.number = setInterval(function() {

    // Get todays date and time
    var now = new Date().getTime();
    
    // Find the distance between now an the count down date
    var distance.number = (countDownDate.number) - now;
    
    // Time calculations for days, hours, minutes and seconds
    var days.number = Math.floor(distance.number / (1000 * 60 * 60 * 24));
    var hours.number = Math.floor((distance.number % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var minutes.number = Math.floor((distance.number % (1000 * 60 * 60)) / (1000 * 60));
    var seconds.number = Math.floor((distance.number % (1000 * 60)) / 1000);
    
    // Output the result in an element with id="demo"
	if (days.number == 0 && hours.number == 0 && minutes.number == 0) {
		document.getElementById("dateHere".number).innerHTML = seconds.number + "s";
	} else if (days.number == 0 && hours.number == 0) {
		document.getElementById("dateHere".number).innerHTML = minutes.number + "m " + seconds.number+ "s";
	} else if (days.number == 0) {
		document.getElementById("dateHere".number).innerHTML = hours.number + "t "
    	+ minutes.number + "m " + seconds.number+ "s";
	} else {
    document.getElementById("dateHere".number).innerHTML = days.number+ "d " + hours.number + "t "
    + minutes.number + "m " + seconds.number + "s";
	}
    
    // If the count down is over, write some text 
    if (distance.number < 0) {
        clearInterval(x.number);
		document.getElementById("dateBackgroundHere".number).style = "position:absolute; bottom:0; height:45px; width:100%; background: rgba(230, 47, 47, 0.8); color:#fff; font-family: Fira Sans, sans-serif; font-size: 12px; font-weight: bold; padding-top: 8px;";
        document.getElementById("dateHere".number).innerHTML = "UDLØBET";
    }
}, 1000);
}

Answer 1

有两件事跳出来：

1. 将其传递给函数时不要将其包装在数组中：

   addEventsHereAndThere(i);
   // No [] here --------^
   

2. 使用时使用有效的 JavaScript（不是 PHP）字符串连接：

   ... = document.querySelector('#thisIsTheDate' + number).value;
   // + not . here ------------------------------^
   

---

旁注：仅通过 ID 选择元素时，最好使用 getElementById（不带 #，因为它需要 ID，而不是选择器）而不是 querySelector，所以：

... = document.getElementById('thisIsTheDate' + number).value;

它们最终会得到相同的结果，但 getElementById 快得多。 （并不是说它经常很重要。）