Javascript 单击即可切换自定义SoundCloud播放暂停图像

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

嗯。我刚刚用“jimdo”创建了一个新网站，我对目前为止我所做的很满意。我的新网站几乎完成了，但我有一个巨大的问题，隐藏一个点击播放按钮，然后显示一个暂停按钮。然后单击暂停按钮，显示播放按钮。我确信有很多代码，但我找不到任何适合我的代码：(

下面是一幅它目前的样子：

这两个图像按钮连接到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">

---

我真的不知道该怎么做。

如果你能够调整CSS，你可以实现jQuery的

.addClass（）

和

.removeClass

下面是一个工作示例，其中播放和暂停按钮相互重叠。注册了一个单击事件，当触发时，带有

.hide

类的按钮被分配给

toShow

变量。然后，根据显示的按钮添加和删除hide类。正如您在注释中阐明的，它是当页面上有几个按钮时，要求代码工作，下面是一个工作示例

确保按钮位于

按钮包装器

类中，因为代码使用该类查找当前隐藏的按钮

$（'.opa'）。单击（函数（e）{
var toShow=$（e.target.parent（）.find（'.opa.hide'）[0]；
$（e.target）.addClass（'hide'）；
$（toShow）.removeClass（'hide'）；
})；

。按钮包装器{
位置：相对位置；
高度：50px；
}
.opa{
位置：绝对位置；
宽度：100%；
最大宽度：20px；
过滤器：倒置（100%）；
光标：指针；
保证金：-0px 1px；
}
.隐藏{
显示：无；
}

如果这是使用iframe显示的，并且代码在其中。您将无法更改任何CSS。另请参阅您是否检查了Soundcloud的设置？我知道他们的播放器有几个显示选项。您可能很幸运，这是一个可以设置的选项。@RoyScheffers“播放和暂停按钮”图片不是iframe代码的一部分。这些图片只有一个链接到soundcloud播放器的“id”（playSound）。缺少的只是一个css或脚本代码，用于在单击时隐藏“播放”图像并显示“暂停”图像。如果单击“暂停”图像，则会将其隐藏并显示“播放”再次成像。等等。好的，这改变了一切。看一下提供的答案。这应该会起作用。嘿，罗伊。你做到了，代码工作得很好！非常感谢：）但是，我现在有一个新问题。在我的网站上，我不仅有一个玩家，还有十个。将来还会有更多的卡片，就像我所附的图片一样。问题是当我点击另一张牌上的另一个“播放”按钮时，“播放”按钮应该会重新出现。我发现一个网站，你可以看到一个非常好的例子，它应该是什么样子。有没有可能在现有代码中添加一个类或id来实现这一点？当有一个工作示例时，规格总是会改变：）不过不用担心。我已经更新了我的示例，它应该适合您的需要。让我知道这是否有效。我明白你的意思，正如你在示例链接中指出的，这是这些玩家之间的行为。如果没有更好的代码示例，我很难将其转化为代码。你能用一个2个或更多玩家的工作示例创建一个游戏吗？然后我可以看看创建此功能需要哪些代码，以及是否可以完成。谢谢，谢谢。看一看。看起来这可能会在网站上起作用。代码当然可以改进，但我不想对其进行太多优化，因为我不确定它是否仍能在Jimdo上运行。如果我们拿到了就告诉我！好吧，我不知道。如果你想通过我的投资组合网站上的联系方式联系我。它在我的堆栈溢出配置文件中。如果您愿意，我们可以通过电子邮件进一步了解。

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

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

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