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

Я бы посоветовал не использовать сам стиль для проверки, поскольку браузер подвержен исправлению крошечных ошибок, что означает, что все не так, как ожидалось. Heres, что бы я предложил:

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

Сокращения на использование фона свойства или anyother CSS свойства в JQuery ли использование добавить класс и проверить, потому что имущество, созданные встроенный стиль в HTML и классы должны быть многоразовыми и мы используем в любом месте с классом

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

в CSS

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

если вы проверяете с помощью JQuery hasClass(). возвращает булево

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

    } 
    // if condition here like that 
} 

Answer 3

Это происходит потому, что браузер меняет относительный URL на абсолютный.

В другом случае, если фоновое изображение ../test.png в CSS, .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)'); 
     } 
    } 

Таким образом, вы уверены, что независимо от того, какой браузер вы, он будет работать.