循环或数组，但也删除 1 个对象?

Question

我想重构这个长音频播放脚本，使其更多——我没有参与那个>:(——通过使用数组。

<script>
/* ... */
/* Used by other trigger */
var m1 = $(".bgm-one")[0];
var m2 = $(".bgm-two")[0];
var m3 = $(".bgm-three")[0];
var m4 = $(".bgm-four")[0];
var m5 = $(".bgm-five")[0];
var m6 = $(".bgm-six")[0];
var m7 = $(".bgm-seven")[0];
var m8 = $(".bgm-eight")[0];
var m9 = $(".bgm-nine")[0];
var m10 = $(".bgm-ten")[0];
var m11 = $(".bgm-eleven")[0];
var m12 = $(".bgm-twelve")[0];
var playing = true;
if (setBGM == "bgm1"){
m2.animate({volume: 0}, 1400);setTimeout(function(){m2.pause()}, 1450);
m3.animate({volume: 0}, 1400);setTimeout(function(){m3.pause()}, 1450);
m4.animate({volume: 0}, 1400);setTimeout(function(){m4.pause()}, 1450);
m5.animate({volume: 0}, 1400);setTimeout(function(){m5.pause()}, 1450);
m6.animate({volume: 0}, 1400);setTimeout(function(){m6.pause()}, 1450);
m7.animate({volume: 0}, 1400);setTimeout(function(){m7.pause()}, 1450);
m8.animate({volume: 0}, 1400);setTimeout(function(){m8.pause()}, 1450);
m9.animate({volume: 0}, 1400);setTimeout(function(){m9.pause()}, 1450);
m10.animate({volume: 0}, 1400);setTimeout(function(){m10.pause()}, 1450);
m11.animate({volume: 0}, 1400);setTimeout(function(){m11.pause()}, 1450);
m12.animate({volume: 0}, 1400);setTimeout(function(){m12.pause()}, 1450);
m1.addEventListener("ended", function(){this.currentTime = 0;if (playing){this.play();}}, false);
setTimeout(function(){
m1.animate({volume: 0.1}, 1450);
m1.play();
}, 1450);
setTimeout(function(){
m1.animate({volume: 1}, 1500);
}, 1450);
}
if (setBGM == "bgm2"){
m1.animate({volume: 0}, 1400);setTimeout(function(){m1.pause()}, 1450);
m3.animate({volume: 0}, 1400);setTimeout(function(){m3.pause()}, 1450);
m4.animate({volume: 0}, 1400);setTimeout(function(){m4.pause()}, 1450);
m5.animate({volume: 0}, 1400);setTimeout(function(){m5.pause()}, 1450);
m6.animate({volume: 0}, 1400);setTimeout(function(){m6.pause()}, 1450);
m7.animate({volume: 0}, 1400);setTimeout(function(){m7.pause()}, 1450);
m8.animate({volume: 0}, 1400);setTimeout(function(){m8.pause()}, 1450);
m9.animate({volume: 0}, 1400);setTimeout(function(){m9.pause()}, 1450);
m10.animate({volume: 0}, 1400);setTimeout(function(){m10.pause()}, 1450);
m11.animate({volume: 0}, 1400);setTimeout(function(){m11.pause()}, 1450);
m12.animate({volume: 0}, 1400);setTimeout(function(){m12.pause()}, 1450);
m2.addEventListener("ended", function(){this.currentTime = 0;if (playing){this.play();}}, false);
setTimeout(function(){
m2.animate({volume: 0.1}, 1450);
m2.play();
}, 1450);
setTimeout(function(){
m2.animate({volume: 1}, 1500);
}, 1450);
}
/* ... And the rest of the list that will be too long to include; like "if (setBGM == "bgm3")," "if (setBGM == "bgm4")"... */
</script>

上面有 12 个不同的变量声明和方法调用，也许可以转换为类似数组的代码，但是如何从每行中排除一个对象？就像在 m1 行中一样，它排除了 var m1...

Answer 1

你要找的是循环。for 循环允许您遍历数组，并可以大大缩短您拥有的代码。

https://jsfiddle.net/7wsgtkLj/12/

这是重构的开始(我更改了前半部分，所以看看是否可以修复其余部分(：

let musicEls = [];
const numbers = ["one", "two", "three", "four", "five", "six", "seven", "eight", "nine", "ten", "eleven", "twelve"];
for (let i = 0; i < 12; i++) {
musicEls.push($(".bgm-" + numbers[i])[0]);
}
var playing = true;
if (setBGM == "bgm1"){
for (int i = 0; i < musicEls.length; i++) {
musicEls[i].animate({volume: 0}, 1400);
setTimeout(function(){m2.pause()}, 1450);
}
...

我强烈建议您也阅读数组。该数组有一个.push()方法，用于上面的代码。