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

由于2个类存在于同一个选择器上。你写的方式会试图找到一个班级为fa-twitch

的孩子

还要确保您的代码位于dom ready内。

<强> Check Fiddle

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

1 个答案: