Question

我正在使用bxslider处理一些代码，因为我有很多大图片，页面加载缓慢，我尝试了lazy loading plugin，但与bxslider不兼容。最后，我试着自己写一些代码。

我尝试做某事，如果div is visible，removeAttr data-style，则添加addAttr style。我在 jsfiddle 中的代码（bxslider的省略代码）：

<div class="bgAnchor" data-style="background:url('http://it.bing.com/az/hprichbg?p=rb%2fNewRiverGorgeBridge_ROW468427072.jpg') no-repeat;background-position:0px 0px;"></div>
<div class="bgAnchor" data-style="background:url('http://it.bing.com/az/hprichbg?p=rb%2fPalmFrond_ROW2095872384.jpg') no-repeat;background-position:0px 0px;"></div>
<div class="bgAnchor" data-style="background:url('http://it.bing.com/az/hprichbg?p=rb%2fJacksonSquare_ROW1364682631.jpg') no-repeat;background-position:0px 0px;"></div>
<div class="bgAnchor" data-style="background:url('http://it.bing.com/az/hprichbg?p=rb%2fAustraliaClouds_ROW1600390948.jpg') no-repeat;background-position:0px 0px;"></div>

$('.bgAnchor').each(function(){
    if($(this).is(":visible")){
        var data_style = $(this).attr('data-style');
        if(data_style!== 'undefined' && data_style!== false){
            var attr_image = $(this).attr("data-style");
            $(this).css('background',attr_image).removeAttr("data-style");
        }
    }
});

但我不确定为什么它不起作用。如果有人能帮助我，我很高兴。非常感谢。

Answer 1

.css()一次仅适用于一个属性，你有3个，尝试使用style属性; Undefined不是字符串，它是一个内置变量;而且您不需要两次data_style。

试试这个：

$('.bgAnchor').each(function(){
    if($(this).is(":visible")){
        var data_style = $(this).attr('data-style');
        if(data_style!== undefined && data_style!== false){
            $(this).attr('style',data_style).removeAttr("data-style");
        }
    }
});

Answer 2

正在进行两件事：

1）您应该使用javascript中的typeof函数检查它是否未定义，如下所示：

$('.bgAnchor').each(function(){
    if($(this).is(":visible")){
        var data_style = $(this).attr('data-style');
        if(typeof data_style!== 'undefined' && data_style!== false){                   
            var attr_image = $(this).attr("data-style");
            alert(attr_image);
            $(this).css('background', attr_image).removeAttr("data-style");
        }
    }
});

（有关原因的详细解释，请参阅this answer about typeof

2）你试图通过$(this).css('background', attr_image)调用过多地传递给“背景”风格。因此，您需要按如下方式更改数据样式属性：

<div class="bgAnchor" data-style="url('http://it.bing.com/az/hprichbg?p=rb%2fNewRiverGorgeBridge_ROW468427072.jpg') no-repeat"></div>

如果你想设置背景位置等，你可以在你的css中为所有.bgAnchor元素做到这一点，或者你可以为背景位置添加一个新的数据样式，但你不能同时填充两个背景-position和background in background css property。

Answer 3

问题在于：

$(this).css('background',attr_image)

你的var attr_image（你不需要BTW，它与data_style相同）是以下字符串（对于第一个div）：

background:url('http://it.bing.com/az/hprichbg?p=rb%2fNewRiverGorgeBridge_ROW468427072.jpg') no-repeat;background-position:0px 0px;

最简单的解决方案是使用它：

this.style = attr_image;

另一个解决方案是将您的样式属性设置为单独的data-属性，一个用于background，另一个用于background-repeat，另一个用于background-position。在这种情况下，您的data-属性应仅包含值，而不包含CSS属性名称。

Answer 4

from jQuery css() page

Shorthand CSS properties (e.g. margin, background, border) are not supported. 
For example, if you want to retrieve the rendered margin, 
use: $(elem).css('marginTop') 
and $(elem).css('marginRight'), and so on.

这意味着您无法在css（）

中使用背景

所以你必须使用style属性。

 $(this).attr('style',attr_image);

here is jsFiddle page

jquery删除attr然后添加attr

4 个答案: