0

我有一个用 jQuery 触发的播放器。我可能在一个页面上有多个播放器，但工具栏中只有一个“miniPlayer”。如果触发另一个播放器事件，播放器工具栏需要播放/暂停等。为此，我只需要替换播放器元素中的类。

工具栏中的播放器的 id 为#miniPlayer，所有其他播放器都只是#player，这是用于样式的。因此，我只能替换元素中的类，以便在单击播放器中的按钮时不会更改 miniPlayer 的样式，反之亦然。

迷你播放器（播放）；

<a id="miniControls" class="play" href="" title=""></a>

会变成;

<a id="miniControls" class="pause" href="" title=""></a>

Onclick 迷你播放器暂停按钮或普通播放器暂停按钮。

普通玩家（播放）；

<a id="controls" class="play" href="" title=""></a>

会变成;

<a id="controls" class="pause" href="" title=""></a>

Onclick 迷你播放器暂停按钮或普通播放器暂停按钮。

如果点击普通播放器（播放），我目前拥有的 jQuery 将替换迷你播放器；

<a id="controls" class="pause" href="" title=""></a>

但是 id 需要保留为样式的 miniControls。如果单击 miniPlayer，这将是相反但相同的问题。

jquery 脚本中的播放/暂停功能（目前仅适用于 miniPlayer）：

play.live('click', function(e) {
    e.preventDefault();
    song.play();

    $('.play').replaceWith('<a id="miniControls" class="pause" href="" title=""></a>');

    $('.seek').attr('max',song.duration);
});

pause.live('click', function(e) {
    e.preventDefault();
    song.pause();
    $('.pause').replaceWith('<a id="miniControls" class="play" href="" title=""></a>');

});

有没有办法只替换类，所以我只需将 $('.pause') 替换为 $('.play') 而不是整个<a>标签。我在 jquery 网站上看过，但找不到任何东西。也许我从错误的角度看它。

4

2 回答 2

0

查看 jQuery 的 .toggleClass() 函数：

http://api.jquery.com/toggleClass/

于 2012-08-01T19:49:27.493 回答
0 
$('#miniControls').click(function(e){
    e.preventDefault();
    $(this).hasClass('play') ? song.pause():song.play();
    $(this).toggleClass('play pause');
});

您可以通过使用类似上述示例的方法来大大减少您的代码。在这种情况下，您将使用.toggleClass()在播放和暂停类之间进行切换，并.hasClass()用于确定要执行的操作。

于 2012-08-01T19:52:11.003 回答