如何用另一個變量定義變量？

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。

例：

 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> 

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

 var audio = document.getElementsByTagName("audio"); 

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