Проверка определенного изображения в фоновом режиме

Question

Я использую Supersized для случайного отображения 3-х фоновых изображений SVG при обновлении. Я пытаюсь использовать jQuery, чтобы проверить, какой SVG отображается, поэтому я могу затем изменить другой css. Код, который я начинаю с:

if ($('#supersized').css('background-image') == "public/images/red-bg.svg") { 
    alert('There is a background image'); 
} 

Я не уверен, как точно проверить, какое изображение и выше не работает. Помощь приветствуется.

Answer 1

Его очень вероятно, что значение background-image не будет точно public/images/red-bg.svg. Поэтому вы должны проверить, содержит ли он этот URL-адрес, используя метод indexOf. Кроме того, первое условие в if заключается в том, чтобы избежать ошибок в случае, если background-image не установлен (его значение будет undefined).

var bgImg = $('#supersized').css('background-image'); 
if (bgImg && bgImg.indexOf("public/images/red-bg.svg") > -1) { 
    alert('There is a background image'); 
} 

Метод indexOf возвращает позицию подстроки в строке. Например, для строки "HELLO" и подстановки "H" она вернет 0, а для подстроки "ELL" вернется 1. Он возвращает -1, когда подстрока не найдена.

Documentation

Answer 2

Вы можете хранить ваша строка соответствует в bgCSS объекта и все ваши дополнительные ссылки стиль CSS чисто заказанные и на месте:

var $supersized = $('#supersized'); 

var bgCSS = { 
    // BG MATCH : {ADDITIONAL STYLES} 
    "red-bg.svg" : {color:"white", borderColor:"#a01"}, 
    "blue-bg.svg" : {color:"yellow", borderColor:"#0f0"} 
}; 

if ($supersized.css('background-image').match("red-bg.svg")) { // if has that BG... 
    $supersized.css(bgCSS["red-bg.svg"]); // ...apply our additional styles 
} 

http://jsbin.com/hutepa/1/edit?html,css,js,output