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

已修改以弥补url()（或background）属性中的空background-image填充当前页面的网址的问题。这会产生相当庞大的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测试三个条件：

!imgString，如果background-image方法的.css()属性没有返回任何字符串。
imgString == 'none'，因为如果没有定义background-image，jQuery（有时或可能总是）返回'none'。
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()是否只是由浏览器自动填充。

编辑后，指向页面的网址，发现PHP和GET的使用比我想象的更加尴尬。

在控制台中使用以下内容（当然在Chromium中）：

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

以上，在JS Fiddle工作并实现到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获得上述演示！

简单的jQuery在Chrome上运行，而不是在Firefox＆amp;其它浏览器

1 个答案: