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

【问题标题】：Changing child's class when parent is clicked with jQuery使用jQuery单击父级时更改子级
【发布时间】：2014-03-24 08:48:06
【问题描述】：

诚然，我对 jQuery 完全不熟悉。我在这里窥探了一下，试图找到 sn-ps 来帮助我实现我的目标，但我找不到任何东西。

我的标记是这样的：

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

这绝对行不通。

【问题讨论】：

除了else if 代码似乎很好。您在什么事件上触发此代码？

标签： jquery class parent

【解决方案1】：

这应该可以，你错过了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');
    }
}

【讨论】：

我在一个函数中使用了你的代码，并像这样调用它：$('#local-song-button').click(togglePlayButton()); 控制台中没有任何更改，也没有错误。我会以错误的方式解决这个问题吗？在页面加载时 #local-song-button 上的唯一类，第一次单击时将 sm2_playing 附加/切换到 sm2_paused。如果这是附加类的方式，这段代码会起作用吗？ Here is the page in question 如果您想查看它的实际效果。
我已更新我的答案以使用您的 togglePlayButton() 函数。
工作出色。非常感谢！

【解决方案2】：

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

Uncaught SyntaxError: Unexpected token {

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

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

【讨论】：

啊！谢谢你。我正在运行的另一个脚本会根据正在播放或暂停的歌曲更改/附加其他两个类。