javascript - 单击时切换自定义 SoundCloud 播放暂停图像

Question

希望这个话题不要出现两次。我已经搜索了一个星期，但没有找到任何对我有帮助的东西。

好的。我刚刚用“jimdo”创建了一个新网站，我对目前所管理的一切感到非常满意。我的新网站快完成了，但是我有一个很大的问题，那就是在点击时隐藏播放按钮，然后显示暂停按钮。然后点击暂停按钮，出现播放按钮。我敢肯定那里有很多代码，但我找不到适合我的代码:(

这是它目前的样子: play-pause button parallel

这两个图像按钮已连接到 SoundCloud iframe 播放器并且可以正常工作，但如果有一个按钮而不是并排的两个按钮，那就太棒了。

代码如下所示:

<div style="position: relative;">
    <img id="playSound2" src="https://u.jimcdn.com/cms/o/s64e01451c5929131/userlayout/font/playcircle.svg" alt="play" title="play" class="opa" style="position: absolute;width: 100%;max-width: 20px;filter: invert(100%);cursor: pointer;margin: -30px 1px;" name="playSound2"><img id="stopSound2" src="https://u.jimcdn.com/cms/o/s64e01451c5929131/userlayout/font/pausecircle.svg" alt="pause" title="pause" class="opa" style="position: absolute;width: 100%;max-width: 20px;filter: invert(100%);cursor: pointer;margin: -30px 22px;" name="stopSound2">

$(function(){
  var widget1 = SC.Widget("so2");

    $("#playSound2").click(function() {
      widget1.play();

  });  
  $("#stopSound2").click(function() {
      widget1.pause();
  });      
});

我真的不知道该怎么做。

Answer 1

如果您能够调整 CSS，您可以实现 jQuery 的 .addClass() 和 .removeClass。

这是一个工作示例，其中播放按钮和暂停按钮放置在彼此之上。已注册单击事件并在触发时将具有 .hide 类的按钮分配给 toShow 变量。然后，根据显示的按钮添加和删除hide 类。正如您在评论中阐明的那样，当页面上有多个按钮时需要让代码正常工作，这是一个有效的示例。

确保按钮在 button-wrapper 类中，因为代码使用它来查找当前隐藏的按钮。

$('.opa').click(function(e) {
  var toShow = $(e.target).parent().find('.opa.hide')[0];
  $(e.target).addClass('hide');
  $(toShow).removeClass('hide');
});

.button-wrapper {
  position: relative;
  height: 50px;
}

.opa {
  position: absolute;
  width: 100%;
  max-width: 20px;
  filter: invert(100%);
  cursor: pointer;
  margin: -0px 1px;
}

.hide {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="button-wrapper">
  <img id="playSound2" src="https://u.jimcdn.com/cms/o/s64e01451c5929131/userlayout/font/playcircle.svg" alt="play" title="play" class="opa" name="playSound2">
  <img id="stopSound2" src="https://u.jimcdn.com/cms/o/s64e01451c5929131/userlayout/font/pausecircle.svg" alt="pause" title="pause" class="opa hide" name="stopSound2">

</div>

<div class="button-wrapper">
  <img id="playSound2" src="https://u.jimcdn.com/cms/o/s64e01451c5929131/userlayout/font/playcircle.svg" alt="play" title="play" class="opa" name="playSound2">
  <img id="stopSound2" src="https://u.jimcdn.com/cms/o/s64e01451c5929131/userlayout/font/pausecircle.svg" alt="pause" title="pause" class="opa hide" name="stopSound2">

</div>

<div class="button-wrapper">
  <img id="playSound2" src="https://u.jimcdn.com/cms/o/s64e01451c5929131/userlayout/font/playcircle.svg" alt="play" title="play" class="opa" name="playSound2">
  <img id="stopSound2" src="https://u.jimcdn.com/cms/o/s64e01451c5929131/userlayout/font/pausecircle.svg" alt="pause" title="pause" class="opa hide" name="stopSound2">

</div>