javascript - 如何用另一个变量定义一个变量？

Question

我想用 javascript 保存音频文件列表。

function save() {
   for(i=1; i<5; i++){
      s=document.getElementById("s"+i);
   };
}

音频文件是这样的:

<audio id="s1"><source src="Sounds/s1.mp3"type="audio/mpeg"></audio>
<audio id="s2"><source src="Sounds/s2.mp3"type="audio/mpeg"></audio>
<audio id="s3"><source src="Sounds/s3.mp3"type="audio/mpeg"></audio>
<audio id="s4"><source src="Sounds/s4.mp3"type="audio/mpeg"></audio>

但直到 s30。

我怎样才能使变量 s 也改变，以便我可以将这些音频文件保存为不同的变量？

Answer 1

在 HTML 中使用 id 会自动在全局范围内创建一个变量，因此您无需自己创建它们。

这样会污染全局作用域，最好不要使用ids。

示例:

console.log(s1);
console.log(s2);
console.log(s3);
console.log(s4);

<audio id="s1"><source src="Sounds/s1.mp3"type="audio/mpeg"></audio>
<audio id="s2"><source src="Sounds/s2.mp3"type="audio/mpeg"></audio>
<audio id="s3"><source src="Sounds/s3.mp3"type="audio/mpeg"></audio>
<audio id="s4"><source src="Sounds/s4.mp3"type="audio/mpeg"></audio>

更好的解决方案是使用类名来选择所有使用 Document#querySelectorAll 的元素, 并获取项目的数组(实际上是 nodeList 之类的数组):

var audio = document.querySelectorAll('.audio');

console.log(audio[0]);
console.log(audio[1]);
console.log(audio[2]);
console.log(audio[3]);

<audio class="audio"><source src="Sounds/s1.mp3"type="audio/mpeg"></audio>
<audio class="audio"><source src="Sounds/s2.mp3"type="audio/mpeg"></audio>
<audio class="audio"><source src="Sounds/s3.mp3"type="audio/mpeg"></audio>
<audio class="audio"><source src="Sounds/s4.mp3"type="audio/mpeg"></audio>