javascript - 音乐播放器跳过向前/向后功能 JQuery

Question

这次是新元素，我正在开发一个音乐播放器小部件，但遇到了困难。我希望做到这一点，以便播放器可以使用向前和向后跳过按钮循环播放事件轨道，而且我知道将元素放在列表中会更容易，但我仍然不知道。我还没有将它连接到任何类型的轨道列表或 api 或类似的东西，现在我想让视觉功能正常工作。

Here's the Codepen as well.

function currentlyPlaying(target) {
  var current = target.parent();
  $('.playingTitle').text(current.children('.title').text());
  $('.playingAuthor').text(current.children('.author').text());
}
$(document).on('click', '.play', function(e){
  $('.pause').attr('class', 'icon play');
  $(e.target).attr('class', 'icon pause');
  currentlyPlaying( $(e.target));
});


$(document).on('click', '.playing', function(e){
  $('.playing').attr('class', 'playingPaused paused controls');
});
$(document).on('click', '.paused', function(e){
  $('.paused').attr('class', 'playingPaused playing controls');
});

* {
  font-family: arial;
}

.container {
  margin: auto;
  padding: 0;
  width: 500px;
  border: 2px solid black;
}

.header {
  margin: auto;
  padding: 0;
  height: 80px;
  width: 100%;
  background: #e0e0e0;
  border-bottom: 1px solid black;
  overflow: hidden;
}

.logo {
  float: left;
}

.header h1 {
  font-size: 32px;
  position: relative;
  left: 8px;
}



.songList {
  margin: auto;
  padding: 0;
  height: 200px;
  width: 100%;
  overflow-y: scroll;
}
.songList ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.song {
  height: 49px;
  width: calc(100% - 10px);
  padding: 5px;
  border-bottom: 1px solid #bbbbbb;
  background: #f1f1f1;
}
.song:hover {
  background: #dddddd;
}

.icon {
  float: left;
  opacity: 0.2;
}
.icon:hover {
  opacity: 0.7;
}

.play {
content:url(https://png.icons8.com/metro/1600/play.png);
  
}

.pause {
content:url(http://icons.veryicon.com/256/System/Windows%208/Media%20Controls%20Pause.png);
}

.title {
  opacity: 0.8;
  font-size: 20px;
  position: relative;
  top: 4px;
  left: 4px;
}

.author {
  opacity: 0.4;
  font-size: 14px;
  position: relative;
  left: 8px;
}



.footer {
  margin: auto;
  padding: 0;
  height: 80px;
  width: 100%;
  background: #888888;
  border-top: 1px solid black;
  overflow: hidden;
}

.controls{
  float: left;
  position: relative;
  filter: invert(1.0);
  opacity: 0.7;
}
.controls:hover {
  filter: invert(0.15);
}
.skipBack {
  top: 16px;
}
.skipForward {
  top: 16px;
}
.playing {
  content:url(https://png.icons8.com/windows/1600/circled-pause.png);
}
.paused {
  content:url(https://png.icons8.com/material/1600/circled-play.png);
}

.playingTitle {
  font-size: 24px;
  color: white;
  opacity: 0.7;
  position: relative;
  top: 16px;
  left: 8px;
}
.playingAuthor {
  font-size: 18px;
  color: white;
  opacity: 0.45;
  position: relative;
  top: 12px;
  left: 12px;
}

<script
  src="http://code.jquery.com/jquery-3.3.1.js"
  integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
  crossorigin="anonymous">
</script>

<div class="container">
  <div class="header">
    <img class="logo" src="http://www.pvhc.net/img59/rpxzzzyofvqahyiwtziu.png" height="80px">
    <h1>Virus Free* Music Player!!</h1>
  </div>
  
  <div class="songList">
    <ul>
      
      <li>
        <div class="song">
          <img class="icon play" height="48px">
          <span class="title">God's Plan</span><br>
          <span class="author">Drake</span>
        </div>
      </li>

      <li>
        <div class="song">
          <img class="icon play" height="48px">
          <span class="title">Havana</span><br>
          <span class="author">Camila Cabello & Young Thug</span>
        </div>
      </li>

      <li>
        <div class="song">
          <img class="icon play" height="48px">
          <span class="title">River</span><br>
          <span class="author">Eminem & Ed Sheeran</span>
        </div>
      </li>

      <li>
        <div class="song">
          <img class="icon play" height="48px">
          <span class="title">Perfect</span><br>
          <span class="author">Ed Sheeran</span>
        </div>
      </li>

      <li>
        <div class="song">
          <img class="icon play" height="48px">
          <span class="title">Echame La Culpa</span><br>
          <span class="author">Luis Fonsi & Demi Lovato</span>
        </div>
      </li>

      <li>
        <div class="song">
          <img class="icon play" height="48px">
          <span class="title">Rockstar</span><br>
          <span class="author">Post Malone & 21 Savage</span>
        </div>
      </li>

      <li>
        <div class="song">
          <img class="icon play" height="48px">
          <span class="title">Him & I</span><br>
          <span class="author">G-Eazy & Halsey</span>
        </div>
      </li>

      <li>
        <div class="song">
          <img class="icon play" height="48px">
          <span class="title">Finesse</span><br>
          <span class="author">Bruno Mars & Cardi B</span>
        </div>
      </li>

      <li>
        <div class="song">
          <img class="icon play" height="48px">
          <span class="title">Wolves</span><br>
          <span class="author">Selena Gomez & Marshmello</span>
        </div>
      </li>

      <li>
        <div class="song">
          <img class="icon play" height="48px">
          <span class="title">Feel It Still</span><br>
          <span class="author">Portugal. The Man</span>
        </div>
      </li>
    </ul>
  </div>
  
  <div class="footer">
    <img class="skipBack controls" src="https://png.icons8.com/metro/1600/skip-to-start.png" height="48px">
    <img class="playingPaused paused controls" height="80px">
    <img class="skipForward controls" src="https://png.icons8.com/metro/1600/end.png" height="48px">
    <span class="playingTitle">Select a track to begin</span><br>
    <span class="playingAuthor">Go ahead no one is stopping you.</span>
  </div>
</div>

Answer 1

我已经从你的 li 标签中删除了 div 标签，因为它们除了使 HTML 结构复杂化之外没有任何作用。

您可以在播放列表中显示选定的歌曲，然后连接上一个和下一个按钮来执行某些操作。

这是一个例子:

$(".song").on("click", function() {
  $(".selected").removeClass("selected");
  $(this).addClass("selected");;
})

$(".skipBack").on("click", function() {
  var target = $(".song.selected").prev(".song");
  $(".selected").removeClass("selected");
  $(target).addClass("selected");
});

$(".skipForward").on("click", function() {
  var target = $(".song.selected").next(".song");
  $(".selected").removeClass("selected");
  $(target).addClass("selected");
});

* {
  font-family: arial;
}

.container {
  margin: auto;
  padding: 0;
  width: 500px;
  border: 2px solid black;
}

.header {
  margin: auto;
  padding: 0;
  height: 80px;
  width: 100%;
  background: #e0e0e0;
  border-bottom: 1px solid black;
  overflow: hidden;
}

.logo {
  float: left;
}

.header h1 {
  font-size: 32px;
  position: relative;
  left: 8px;
}

.songList {
  margin: auto;
  padding: 0;
  height: 200px;
  width: 100%;
  overflow-y: scroll;
}

.songList ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.song {
  height: 49px;
  width: calc(100% - 10px);
  padding: 5px;
  border-bottom: 1px solid #bbbbbb;
  background: #f1f1f1;
}

.song:hover {
  background: #dddddd;
}

.song.selected {
  background: #aaaaaa;
}

.icon {
  float: left;
  opacity: 0.2;
}

.icon:hover {
  opacity: 0.7;
}

.play {
  content: url(https://png.icons8.com/metro/1600/play.png);
}

.pause {
  content: url(http://icons.veryicon.com/256/System/Windows%208/Media%20Controls%20Pause.png);
}

.title {
  opacity: 0.8;
  font-size: 20px;
  position: relative;
  top: 4px;
  left: 4px;
}

.author {
  opacity: 0.4;
  font-size: 14px;
  position: relative;
  left: 8px;
}

.footer {
  margin: auto;
  padding: 0;
  height: 80px;
  width: 100%;
  background: #888888;
  border-top: 1px solid black;
  overflow: hidden;
}

.controls {
  float: left;
  position: relative;
  filter: invert(1.0);
  opacity: 0.7;
}

.controls:hover {
  filter: invert(0.15);
}

.skipBack {
  top: 16px;
}

.skipForward {
  top: 16px;
}

.playing {
  content: url(https://png.icons8.com/windows/1600/circled-pause.png);
}

.paused {
  content: url(https://png.icons8.com/material/1600/circled-play.png);
}

.playingTitle {
  font-size: 24px;
  color: white;
  opacity: 0.7;
  position: relative;
  top: 16px;
  left: 8px;
}

.playingAuthor {
  font-size: 18px;
  color: white;
  opacity: 0.45;
  position: relative;
  top: 12px;
  left: 12px;
}

<script src="http://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous">
</script>

<div class="container">
  <div class="header">
    <img class="logo" src="http://www.pvhc.net/img59/rpxzzzyofvqahyiwtziu.png" height="80px">
    <h1>Virus Free* Music Player!!</h1>
  </div>

  <div class="songList">
    <ul>
      <li class="song">
        <img class="icon play" height="48px">
        <span class="title">God's Plan</span><br>
        <span class="author">Drake</span>
      </li>

      <li class="song">
        <img class="icon play" height="48px">
        <span class="title">Havana</span><br>
        <span class="author">Camila Cabello & Young Thug</span>
      </li>

      <li class="song">
        <img class="icon play" height="48px">
        <span class="title">River</span><br>
        <span class="author">Eminem & Ed Sheeran</span>
      </li>

      <li class="song">
        <img class="icon play" height="48px">
        <span class="title">Perfect</span><br>
        <span class="author">Ed Sheeran</span>
      </li>

      <li class="song">
        <img class="icon play" height="48px">
        <span class="title">Echame La Culpa</span><br>
        <span class="author">Luis Fonsi & Demi Lovato</span>
      </li>

      <li class="song">
        <img class="icon play" height="48px">
        <span class="title">Rockstar</span><br>
        <span class="author">Post Malone & 21 Savage</span>
      </li>

      <li class="song">
        <img class="icon play" height="48px">
        <span class="title">Him & I</span><br>
        <span class="author">G-Eazy & Halsey</span>
      </li>

      <li class="song">
        <img class="icon play" height="48px">
        <span class="title">Finesse</span><br>
        <span class="author">Bruno Mars & Cardi B</span>
      </li>

      <li class="song">
        <img class="icon play" height="48px">
        <span class="title">Wolves</span><br>
        <span class="author">Selena Gomez & Marshmello</span>
      </li>

      <li class="song">
        <img class="icon play" height="48px">
        <span class="title">Feel It Still</span><br>
        <span class="author">Portugal. The Man</span>
      </li>
    </ul>
  </div>

  <div class="footer">
    <img class="skipBack controls" src="https://png.icons8.com/metro/1600/skip-to-start.png" height="48px">
    <img class="playingPaused paused controls" height="80px">
    <img class="skipForward controls" src="https://png.icons8.com/metro/1600/end.png" height="48px">
    <span class="playingTitle">Select a track to begin</span><br>
    <span class="playingAuthor">Go ahead no one is stopping you.</span>
  </div>
</div>