javascript/jquery 菜鸟。许多音频播放器实例

Question

刚开始学习javascript和jquery。我制作了简单的音频播放器，可以播放短音频片段。问题是，一旦我单击所选剪辑上的播放按钮，其他所有剪辑都会显示停止按钮，而不是仅在正在播放的剪辑上显示停止按钮。

如何让停止按钮只显示在选定的剪辑上？

现在它是这样工作的: www.licktrade.com

音频文件位置将从 mysql 数据库中获取，现在我只是用 html 制作它们。

代码:

echo "<div id='player-grid'>";

echo "<div class='player-wrapper' style='background-image:url(uploads/images/profile_pictures/1.jpg);background-size:100px 100px;'>";
echo "<div class='player'>";
echo "<audio class='audio'><source src='uploads/audio/lick1.mp3'></audio>";
echo "<div class='play'></div>";
echo "<div class='stop'></div>";
echo "</div></div>";

echo "<div class='player-wrapper' style='background-image:url(uploads/images/profile_pictures/1.jpg);background-size:100px 100px;'>";
echo "<div class='player'>";
echo "<audio class='audio'><source src='uploads/audio/lick1.mp3'></audio>";
echo "<div class='play'></div>";
echo "<div class='stop'></div>";
echo "</div></div>";

echo "</div>";

?>

<script type="text/javascript" src="jquery-3.1.1.js"></script>

<script>
  $('.stop').hide(); 

    $('.play').click(function() {

      $(this).siblings('.audio').get(0).play();
      $('.play').hide();
      $('.stop').show();
    });

    $('.stop').click(function() {
      $(this).siblings(".audio").get(0).pause();
      $(this).siblings(".audio").get(0).currentTime = 0;
      $('.play').show();
      $('.stop').hide();

    });

</script>

Answer 1

像播放音频一样，稍微修改您的代码以仅隐藏和显示同级按钮。这应该可以解决问题。

$('.stop').hide(); 

$('.play').click(function() {

  $(this).siblings('.audio').get(0).play();
  $(this).hide(); //no need to use siblings
  $(this).siblings('.stop').show();
});

$('.stop').click(function() {
  $(this).siblings(".audio").get(0).pause();
  $(this).siblings(".audio").get(0).currentTime = 0;
  $(this).siblings('.play').show();
  $(this).hide(); //no need to use siblings

});