Question

我有多个.player-button元素，每个元素都有自己的音频。

单击的元素播放音频，暂停以前播放的元素并将类更改为.playing。

问题是，我需要再次点击.playing元素，将其类更改为.paused。这意味着当我点击另一个.player-button时，只要我没有点击它，暂停的那个就不会将其类更改为.paused。这意味着如果用户只需点击各种元素，他就会看到一大堆漂亮的暂停图标！

以下是FIDDLE：https://jsfiddle.net/VitoLattarulo/mdcan81n/14/

jQuery(document).ready(function($) {
  $(".player-button").click(function(e) {
    e.preventDefault();
    var song = $(this).prev('audio').get(0);

    if (song.paused) {
      song.play();
      $(this).addClass("playing");
      $(this).removeClass("paused");
    } else {
      song.pause();
      $(this).addClass("paused");
      $(this).removeClass("playing");
    }
  });

  document.addEventListener('play', function(e) {
    var audios = document.getElementsByTagName('audio');
    for (var i = 0, len = audios.length; i < len; i++) {
      if (audios[i] != e.target) {
        audios[i].pause();
      }
    }
  }, true);
});

我显然需要一种方法将两个功能合并在一起，但我仍然是一个新手，无法弄清楚如何做到这一点。

我真的很感激任何帮助！这是我发布第一个网站之前要解决的最后一个问题^ _ ^

Answer 1

由于您没有使用类来确定按钮状态并仅使用它们进行样式化，因此我会在单击任何按钮时删除所有paused和playing类，然后将类重置为像这样需要：

jQuery(document).ready(function($) {
  $(".player-button").click(function(e) {
    e.preventDefault();
    var $this=$(this); // cache this
    var song = $this.prev('audio').get(0);
    $(".player-button").removeClass("paused playing");
    if (song.paused) {
      song.play();
      $this.addClass("playing");
    } else {
      song.pause();
      $this.addClass("paused");
    }
  });
  document.addEventListener('play', function(e) {
    var audios = document.getElementsByTagName('audio');
    for (var i = 0, len = audios.length; i < len; i++) {
      if (audios[i] != e.target) {
        audios[i].pause();
      }
    }
  }, true);
  document.addEventListener('ended', function(e) {
    $(".player-button").removeClass("paused playing");
  }, true);

});

多个音频按钮：在单击新按钮时更改先前播放按钮的类别

1 个答案:

Updated jsFiddle