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

在 jquery 中减少使用背景属性或任何其他 css 属性是否使用添加 class 并检查因为属性创建html 和 classes 中的内联样式必须是可重用的，我们在 class

中使用任何地方

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

在css

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

如果您使用 hasClass().it returns 布尔值

检查 jquery

if (data.playspeed == 100) {   
  if($(#prev).hasClass(prev)){

    }
   // if condition here like that
}

Answer 2

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

另外，如果CSS中的背景图片是../test.png，.css()会returnhttp://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 括在引号之间。

话虽这么说，做您想做的事的最好方法是使用旗帜。您可以使用 class 作为标志：

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

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

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

将 class 添加到您的播放按钮并检查它。但是，这样做时最好将整个背景声明移动到外部 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 更易于解析和分离。

JQuery 如果 css 条件不工作

JQuery if condition on css not working

css

jquery

if-statement

background-image