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。因此，您应该使用方法indexOf检查它是否包含该URL。此外，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

检查背景中的特定图像

2 个答案: