jquery - 使用 Jquery 添加动画 CSS 类以获取抽动状态

Question

我正在尝试根据我的抽搐状态是否实时在元素上添加 css 样式。有点像灯塔。我似乎无法将 css 样式添加到对象中。如果我直接在 html 中添加动画样式属性，它确实可以工作，但需要它根据抽搐状态包裹在 if 语句中。这是位于我的标题中的脚本代码。

<script type='text/javascript'>
$(document).ready(function() {
// Check GRG's twitch status - uses css keyframes to pulse colors if live 
    $.getJSON('https://api.twitch.tv/kraken/streams/grimreapergamers', function(channel) {
        if (channel['stream'] === null) { 
            $('fa fa-twitch').css('animation','twitchpulse 4s infinite');
        } else {
            $('fa fa-twitch').css("style","animation:twitchpulse 4s infinite");
        }
    });
}}
</script>
</head>

这是我试图更改的带有 css 类的 HTML 行。

<a class="dow-menu" href="http://www.twitch.tv/grimreapergamers" target="_blank" data-toggle="tooltip" data-original-title="Twitch">
    <i class="fa fa-twitch"></i>
</a>

我在 JSFIDDLE 中也有代码。 https://jsfiddle.net/LYv3R/407/

Answer 1

您的选择器应该具有 . 来标识类元素。不提供点，将搜索 fa 和 fa-twitch 标签名称。

$('fa fa-twitch')

应该是

$('.fa.fa-twitch')

因为这两个类出现在同一个选择器上。您编写的方式将尝试找到具有类 fa-twitch

的 child

还要确保您的代码在 dom 中准备就绪。

<强> Check Fiddle