禁用数组的0索引，并在数组的最后一个索引上禁用next

时间：2017-06-29 13:14:03

标签： javascript jquery html arrays

我有69首歌曲的列表，并且已经搜索了很多关于如何在i==0时禁用“上一步”按钮并在i==68时禁用下一个按钮，但没有运气。当i的值不是0而最后一个是

时，是否可以显示按钮？

（最好避免使用jQuery）

＆＃13;
＆＃13; 
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();
＆＃13; 
* {
  text-align: center;
}

button img {
  height: 20px;
  width: 20px;
}

button {
  background-color: transparent;
  outline: none;
  border: none;
  cursor: pointer;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：1)

我使用单个功能来更新两个按钮的禁用/启用状态（或隐藏它们，因为您似乎可能想要这样做）。

在启动时调用它，并在每次按钮后单击。

＆＃13;
＆＃13; 
Request.QueryString["value"]
＆＃13; 
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();
＆＃13; 
* {
  text-align: center;
}

button img {
  height: 20px;
  width: 20px;
}

button {
  background-color: transparent;
  outline: none;
  border: none;
  cursor: pointer;
}
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

使用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>
相关问题
最新问题