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>

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

1 个答案: