簡單的jQuery在Chrome瀏覽器上工作，而不是在Firefox和其他瀏覽器上

Question

我寫了這些簡單的線條，以便只有在設置了背景圖像時才顯示.elemproduct div。

我是在Chrome下開發的，剛剛意識到這段代碼只能在Webkit瀏覽器下工作。如果失敗，則每隔.elemproduct就會顯示一次，就好像if聲明未被識別一樣。

function hideBox() { 
    var $bg = $('.elemproduct'); 

    $bg.each(function() { 
    if ($(this).css("background-image") === "url(####)") { 
     return true; 
    } 
    else { 
     $(this).show(); 
    } 
    }); 

    return true; 
}; 

任何想法？

Answer 1

我建議，這可能是因爲background-image是永遠不會完全相等（===）至（大概）圖像目錄http://www.infiniscale.com/beta/的路徑。

如果你想簡單地隱藏這些.elemproduct元素沒有background-image似乎有點更容易使用：

function hideBox() { 
    var $eP = $('.elemproduct'); 
    $eP.each(

    function() { 
     if (!$(this).css('background-image') || $(this).css('background-image') == 'none') { 
      $(this).hide(); 
     } 
    }); 
} 

hideBox(); 

JS Fiddle demo。

---

編輯與在background（或background-image）財產空url()充滿當前頁面的URL問題進行補償。這使得相當龐大的if聲明，但它至少可以可靠地工作（就目前我可以告訴），這是對上述的改進。最新迭代：

function hideBox() { 
    var href = document.location; 
    var $eP = $('.elemproduct'); 
    $eP.each(

     function() { 
     var imgString = $(this).css('background-image'); 
     var srcString = imgString.replace('url(','').replace(')',''); 
      if (!imgString || imgString == 'none' || srcString == href) { 
       $(this).hide(); 
      } 
     }); 
} 
hideBox(); 

JS Fiddle demo。

---

編輯和修正上述中，以除去不必要的變量（ srcString）及其多次調用 .replcace()：

function hideBox() { 
    var href = document.location; 
    var $eP = $('.elemproduct'); 
    $eP.each(

     function() { 
     var imgString = $(this).css('background-image'); 
      if (!imgString || imgString == 'none' || imgString.indexOf(href) > -1) { 
       $(this).hide(); 
      } 
     }); 
} 
hideBox(); 

JS Fiddle demo。

---

響應編輯從OP評論：

我試圖得到它的工作，但在Chrome瀏覽器一切都顯示，IE一切都是隱藏的。即使我看到你的代碼在jsfiddle下工作......我不理解所有事情，例如imgString.indexOf(href) > -1。

的if試驗三個條件：

1. !imgString，如果沒有從.css()方法的background-image屬性返回字符串。
2. imgString == 'none'，因爲如果沒有定義background-image，jQuery（有時或可能總是）返回'none'。

3. imgString.indexOf(href) > -1。這查看imgString變量以查看它是否包含變量href包含的字符串。如果找到字符串，則返回找到的位置;如果未找到，則返回-1。

   var string = "abcdef"; 
   alert(string.indexOf('a')); // alerts: 0 
   

JS Fiddle demo。

alert(string.indexOf('bc')); // alerts: 1 

JS Fiddle demo。

alert(string.indexOf('ef')); // alerts: 4 

JS Fiddle demo。

alert(string.indexOf('x')); // alerts: -1 

JS Fiddle demo。

這是爲了檢查CSS中空的url()不是簡單地被瀏覽器自動填充。

---

被指向的URL頁面，發現使用PHP，並得到由東西一點點更加尷尬比我想象的編輯後。

使用下面的控制檯（當然在Chromium）工作：

$('.elemproduct').each(
    function() { 
     if ($(this).css('background-image') == 'url(' + document.location.toString().substring(0, document.location.href.toString().indexOf('index')) + ')') { 
      $(this).hide(); 
     } 
    }); 

以上，在JS小提琴工作，並落實到hideBox()功能：

// in real life use: 
// var urlString = document.location.href; 
var urlString = 'http://www.infiniscale.com/beta/index.php?id=48'; 


function hideBox() { 
    var href = document.location; 
    var $eP = $('.elemproduct'); 
    $eP.each(
     function(){ 
      if ($(this).css('background-image') == 'url(' + urlString.substring(0,urlString.indexOf('index')) + ')'){ 
       $(this).hide(); 
      } 
     }); 
} 
hideBox(); 

上述演示可在JS Fiddle！