JQuery 如果 css 上的条件不起作用

Question

我有一个服务器每 50 毫秒发送一次状态更新。

我想将我页面上的按钮设置为显示相应的状态。

我有

if (data.playspeed == 100) {
    console.log("play");
    $('#prev').css('background-image','url(../public/images/skipr.png)');
    $('#next').css('background-image','url(../public/images/skipf.png)');
    $('#rwd').css('background-image','url(../public/images/rwdbutton.png)');
    $('#stop').css('background-image','url(../public/images/stopbutton.png)');
    $('#play').css('background-image','url(../public/images/playbutton-active.png)');
    $('#ffwd').css('background-image','url(../public/images/ffwdbutton.png)');
}

它按预期工作。问题:在 iPad 上，按钮闪烁，因为图像刷新过于频繁。所以我将代码更改为:

if (data.playspeed == 100) {
    if ($('#play').css('background-image') != 'url(../public/images/playbutton-active.png)') {
        console.log("play");
        $('#prev').css('background-image','url(../public/images/skipr.png)');
        $('#next').css('background-image','url(../public/images/skipf.png)');
        $('#rwd').css('background-image','url(../public/images/rwdbutton.png)');
        $('#stop').css('background-image','url(../public/images/stopbutton.png)');
        $('#play').css('background-image','url(../public/images/playbutton-active.png)');
        $('#ffwd').css('background-image','url(../public/images/ffwdbutton.png)');
    }
}

我的逻辑:如果播放按钮尚未设置为事件状态，则仅将按钮更新为播放状态。

但它不起作用，我不知道为什么。console.log 仍然每次都会触发(并且按钮仍然闪烁)。

为什么？

Answer 1

我建议不要使用样式本身进行检查，因为浏览器很容易纠正微小的错误，这意味着事情并不完全符合预期。这是我的建议:

if (data.playspeed == 100) {
    if (!$('#play').hasClass("js-activated")) {
        $('#play').addClass("js-activated");

        console.log("play");
        $('#prev').css('background-image','url(../public/images/skipr.png)');
        $('#next').css('background-image','url(../public/images/skipf.png)');
        $('#rwd').css('background-image','url(../public/images/rwdbutton.png)');
        $('#stop').css('background-image','url(../public/images/stopbutton.png)');
        $('#play').css('background-image','url(../public/images/playbutton-active.png)');
        $('#ffwd').css('background-image','url(../public/images/ffwdbutton.png)');
    }
}

向您的播放按钮添加一个类并检查它。但是，这样做时最好将整个背景声明移动到外部 CSS 文件中，而不是使用 javascript 进行设置。

我的建议是将这些行添加到您的 CSS 中:

#prev.js-activated { background-image: url(../public/images/skipr.png); }
#next.js-activated { background-image: url(../public/images/skipf.png); }
#rwd.js-activated  { background-image: url(../public/images/rwdbutton.png); }
#stop.js-activated { background-image: url(../public/images/stopbutton.png); }
#play.js-activated { background-image: url(../public/images/playbutton-active.png); }
#ffwd.js-activated { background-image: url(../public/images/ffwdbutton.png)');

(不过请确保您的路径来自您的 CSS 文件!)并用以下内容替换您的 JS:

if (data.playspeed == 100 && !$('#play').hasClass("js-activated")) {
    $('#play, #next, #rwd, #stop, #prev, #ffwd').addClass("js-activated");
}

这使您的 JS 和 CSS 更易于解析和分离。