禁用陣列的0索引並禁用陣列的最後一個索引的下一個

我有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>&nbsp;<button onclick="nextItem()"><img src="assets/next-button.png"></button> 
 
    <div id="number"></div> 
 
</body>

來源

2017-06-29 Sarthak Singhal

也許prevElement.disabled = I == 0; nextElement.disbaled = I == songs.length; –

我會使用一個函數來更新兩個按鈕的禁用/啓用狀態（或隱藏它們，因爲它看起來你可能想要做的）。

在啓動時以及點擊每個按鈕後調用它。

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; 
 

 
    enableButtons(); 
 
} 
 

 
function nextItem() { 
 
    i = i + 1; 
 
    document.getElementById("au").src = songs[i]; 
 
    document.getElementById("number").innerHTML = i; 
 
    enableButtons(); 
 
    au.play(); 
 

 
} 
 

 
function prevItem() { 
 
    i = i - 1; 
 
    document.getElementById("au").src = songs[i]; 
 
    document.getElementById("number").innerHTML = i; 
 
    enableButtons(); 
 
    au.play(); 
 

 
} 
 

 
function enableButtons() { 
 

 
    var prev = document.getElementById('prev_btn'), 
 
    next = document.getElementById('next_btn'); 
 

 
    prev.disabled = (i <= 0); 
 
    next.disabled = (i >= songs.length - 1); 
 

 
    // remove these lines to just disable, not hide 
 
    prev.style.display = (prev.disabled) ? 'none' : 'inline'; 
 
    next.style.display = (next.disabled) ? 'none' : 'inline'; 
 
} 
 

 
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" alt=prev> 
 
     <br> 
 
</button>&nbsp;<button onclick="nextItem()" id=next_btn><img src="assets/next-button.png" alt=next></button> 
 
    <div id="number"></div> 
 
</body>

來源

2017-06-29 13:28:21

布拉沃，它的工作！謝謝！ –

與jQuery：

<html> 
     <head> 
    <script> 
     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(); 
     }  
     createPlayer(); 
     function Hb(){ 
      var x =parseint($("#number").text()); 
      if(x==0) 
       $("#prev_btn").hide(); 
      else if(x>=songs.lenght-1) 
       $("#next_btn").hide(); 
     } 
     $("#next_btn").click(Hb()); 
     $("#prev_btn").click(Hb()); 
     </script> 
     </head> 
     <style> 
     *{ 
     text-align: center; 
     } 
     button img{ 
     height: 20px; 
     width: 20px; 
     } 
     button{ 
     background-color: transparent; 
     outline: none; 
     border: none; 
     cursor: pointer; 
     } 
     </style> 
     <body onload="createPlayer(); check()"> 
     <div id="demo"></div> 
     <button onclick="prevItem()" id="prev_btn"><img src="assets/next-button.png"> 
     <br> 
</button>&nbsp;<button onclick="nextItem()" id="next_btn"><img src="assets/next-button.png"></button> 
     <div id="number"></div> 
</body> 
</html>

嘗試此，它應該工作

沒有jQuery的：

<html> 
     <head> 
    <script> 
     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(); 
     Hb(); 
     } 
     function prevItem(){ 
     i=i-1; 
     document.getElementById("au").src= songs[i]; 
     document.getElementById("number").innerHTML = i; 
     au.play(); 
     Hb(); 
     }  
     createPlayer(); 
     function Hb(){ 
      var x =parseint(document.getElementById("number").value); 
      if(x==0) 
       document.getElementById("prev_btn").style.visibility="hidden"; 
      else if(x>=songs.lenght-1) 
       document.getElementById("next_btn").style.visibility="hidden"; 
      else { 
      document.getElementById("prev_btn").style.visibility="visible"; 
      document.getElementById("next_btn").style.visibility="visible"; 
      } 
     } 
     </script> 
     </head> 
     <style> 
     *{ 
     text-align: center; 
     } 
     button img{ 
     height: 20px; 
     width: 20px; 
     } 
     button{ 
     background-color: transparent; 
     outline: none; 
     border: none; 
     cursor: pointer; 
     } 
     </style> 
     <body onload="createPlayer(); check()"> 
     <div id="demo"></div> 
     <button onclick="prevItem()" id="prev_btn"><img src="assets/next-button.png"> 
     <br> 
</button>&nbsp;<button onclick="nextItem()" id="next_btn"><img src="assets/next-button.png"></button> 
     <div id="number"></div> 
</body> 
</html>

來源

2017-06-29 13:26:42 JustARandomProgrammer

禁用陣列的0索引並禁用陣列的最後一個索引的下一個

回答

相關問題