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会自动在全局范围内创建变量，因此您无需自行创建变量。

这污染了全球范围，最好不要使用ID。

示例：

＆＃13;

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

＆＃13;

<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>

＆＃13;

更好的解决方案是使用类名来使用Document#querySelectorAll选择所有元素，并获取一个数组（实际上像nodeList这样的数组）：

＆＃13;

var audio = document.querySelectorAll('.audio');

console.log(audio[0]);
console.log(audio[1]);
console.log(audio[2]);
console.log(audio[3]);

＆＃13;

<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>

＆＃13;

Answer 2

使用document.querySelectorAll()只有一行代码，用于创建要使用的对象audios：

var audios = document.querySelectorAll('audio');

// Audio ids, src
audios.forEach(function (el) {
  console.log(el.id, el.querySelector('source').src);
});

// All audios
console.log('audios:', audios);

<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>

Answer 3

您可以使用对象存储类似hashmap / properties或使用数组来执行此操作，请参阅下面的示例：

对象：

function save() {
   var audios = {};
   for(i=1; i<5; i++){
      var id = "s"+i;
      audios[id] = document.getElementById(id);
   };
   return audios;
}


var audios = save();

console.log(audios["s2"]);
console.log(audios["s3"]);

<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>

阵列：

function save() {
   var audios = [];
   for(i=1; i<5; i++){
      var id = "s"+i;
      audios.push(document.getElementById(id));
   };
   return audios;
}


var audios = save();

console.log(audios[1]);
console.log(audios[2]);

<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>

一次选择所有：

var audio = document.querySelectorAll('audio');

console.log(audio[0]);
console.log(audio[1]);
console.log(audio[2]);
console.log(audio[3]);

<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>

Answer 4

<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>

{{1}}

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

4 个答案: