我有69首歌曲的列表,並且已經搜索了很多關於如何在i==0
禁用上一個按鈕時禁用下一個按鈕時i==68
,但沒有運氣。當i的值不是0和最後一個時,可以顯示按鈕嗎?禁用陣列的0索引並禁用陣列的最後一個索引的下一個
(優選避免的jQuery)
var songs = [
"assets/Playlists/1.mp3",
"assets/Playlists/2.mp3",
"assets/Playlists/3.mp3",
];
var i = 0;
function createPlayer() {
var a = document.createElement("audio");
a.controls = true;
a.setAttribute("id", "au");
a.src = songs[i];
document.getElementById("demo").appendChild(a);
a.autoplay = true;
a.addEventListener("ended", nextItem);
document.getElementById("number").innerHTML = i;
}
function nextItem() {
i = i + 1;
document.getElementById("au").src = songs[i];
document.getElementById("number").innerHTML = i;
au.play();
}
function prevItem() {
i = i - 1;
document.getElementById("au").src = songs[i];
document.getElementById("number").innerHTML = i;
au.play();
}
function check() {
// ...
}
createPlayer();
* {
text-align: center;
}
button img {
height: 20px;
width: 20px;
}
button {
background-color: transparent;
outline: none;
border: none;
cursor: pointer;
}
<body onload="createPlayer(); check()">
<div id="demo"></div>
<button onclick="prevItem()" id="prev_btn">
<img src="assets/next-button.png">
<br>
</button> <button onclick="nextItem()"><img src="assets/next-button.png"></button>
<div id="number"></div>
</body>
也許prevElement.disabled = I == 0; nextElement.disbaled = I == songs.length; –