Question

我当然完全不熟悉jQuery。我已经在这里偷了一下，试图找到片段来帮助我实现目标，但我找不到任何东西。

我的标记是这样的：

<a href="#" id="local-song-button" class="music sm2_link">
    <i id="button-toggle" class="fa fa-play-circle-o blue"></i>
</a>

我正在运行一个脚本，根据事件更改local-song-button <a>。播放非活动歌曲时可以sm2_link，播放歌曲时可以sm2_playing，暂停时可以sm2_paused。

现在，我遇到的问题是我想改变button-toggle的类，具体取决于local-song-button所采用的类。我似乎无法弄清楚这样做的正确方法。我也调查了toggleClass()，但我觉得我需要在某个地方发表if()声明？这就是我能想到的：

if ($('#local-song-button').hasClass('sm2_playing')){
   $('#button-toggle').removeClass('fa-play-circle-o');
   $('#button-toggle').addClass('fa-pause');
}elseif ($('#local-song-button').hasClass('sm2_paused')){
   $('#button-toggle').removeClass('fa-pause');
   $('#button-toggle').addClass('fa-play-circle-o');
}

这绝对不起作用。

Answer 1

如果您使用firebug或chrome开发人员工具，则可以从控制台选项卡中看到此错误：

Uncaught SyntaxError: Unexpected token {

这是因为你elseif。正确的方法是使用else if。解决它，应该没问题。

另请注意，根据您提问的HTML标记，#local-song-button锚只有sm2_link类，而不是sm2_playing或sm2_paused

Answer 2

这应该有用，你错过了else和if之间的空格，你也可以使用toggleClass。

function togglePlayButton()
{
    var loadingBtn = $('#local-song-button');
    var toggleBtn = $('#button-toggle');

    if(loadingBtn.hasClass('sm2_playing') || loadingBtn.hasClass('sm2_link'))
    {
      toggleBtn.toggleClass('fa-play-circle-o fa-pause');
    }
    else if(loadingBtn.hasClass('sm2_paused'))
    {
      toggleBtn.toggleClass('fa-pause fa-play-circle-o');
    }
}

使用jQuery单击父级时更改子级

2 个答案: