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

Question

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

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

我有

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更加可解析和分离。

Answer 2

发生这种行为是因为浏览器将相对url更改为绝对url。

换句话说，如果背景图像是CSS中的../test.png，则.css()将返回http://www.example.com/parents/of/current/folder/test.png。

只需获取文件名并进行比较即可：

if ($('#play').css('background-image').split('/').pop() != 'playbutton-active.png)')
//The ending parenthesys is still there though...

但有一个问题，没有一个浏览器能以同样的方式工作。因此，也许这个条件不起作用，因为有些浏览器会将URL括在引号之间。

话虽如此，做你想做的事情的最好方法就是使用旗帜。你可以使用一个类作为标志：

if (data.playspeed == 100) {
        if (!$('#play').hasClass('active')) {
            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)')
            .addClass('active');
            $('#ffwd').css('background-image','url(../public/images/ffwdbutton.png)');
        }
    }

这样，你就可以确信，无论你是哪种浏览器，它都能工作。

Answer 3

在jquery中减少使用background属性或任何其他css属性是否使用add class和check，因为在html和class中创建的内联样式的属性必须是可重用的，我们使用任何where with class

 $('#prev').addClass('prev');

在css中

.prev{
  background-image : 'url(../public/images/skipr.png)' ;
}

如果使用hasClass（）与jquery进行检查，它将返回布尔

if (data.playspeed == 100) {   
  if($(#prev).hasClass(prev)){
    }
   // if condition here like that
}