Question

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

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

迷你播放器（播放）;

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

将成为;

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

点击miniPlayer暂停按钮或普通播放器暂停按钮。

普通球员（比赛）;

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

将成为;

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

点击miniPlayer暂停按钮或普通播放器暂停按钮。

如果点击普通玩家（游戏），我现在拥有的jQuery将取代miniplayer;

<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>');

});

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

Answer 1

查看jQuery的.toggleClass（）函数：

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

Answer 2

$('#miniControls').click(function(e){
    e.preventDefault();
    $(this).hasClass('play') ? song.pause():song.play();
    $(this).toggleClass('play pause');
});

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

jQuery仅替换元素的类而不更改其他内容

2 个答案: