禁用阵列的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索引并禁用阵列的最后一个索引的下一个

回答

相关问题