jquery删除attr然后添加attr

问题描述：

我工作的一些代码与bxslider，因为我有很多大的图像，页面加载缓慢，我试过任何lazy loading plugin，但不适用于bxslider。最后，我试图自己写一些代码。jquery删除attr然后添加attr

我试着做点什么，如果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"); 
     } 
    } 
});

，但我不知道为什么它不工作。如果有人能帮助我，我很高兴。非常感谢。

'data_style！== 'undefined''应该是'data_style！== undefined'或'typeof运算data_style！==' undefined''如果你喜欢令人讨厌丑陋的代码。 – 2012-02-23 17:12:39

如果您在$（document）.ready（）运行该代码，那么在文档完成加载完成之前可能不会触发该代码。 – Dave 2012-02-23 17:13:11

...和你的jsFiddle加载'MooTools'而不是'jQuery'。 – 2012-02-23 17:14:01

答

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.

这意味着（）

所以你有style属性做到这一点，你不能使用CSS背景。

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

here is jsFiddle page

感谢教，顺便说一句，这也加载页面加载时，所有图像为什么'是（“：可见”）'不工作？ – Giberno 2012-02-23 17:43:47

@Giberno，因为所有div都是可见的，所以没有任何属性可以使它们在jsFiddle示例中不可见。他们**没有** _none_的CSS _display_值，他们的_width_和_height_都不**被显式设置为** 0 **，所以所有的div都是可见的，你可以看看[here]（http： //api.jquery.com/visible-selector/）如何：可见选择器工作。 – ocanal 2012-02-23 17:52:24

@Giberno，看看[更新的jsFiddle]（http://jsfiddle.net/qUEQp/11/）中显示值为none的第一个div，你可以看到（“：visible”）是加工。 – ocanal 2012-02-23 17:59:20

答

.css()只适用于一个属性，你有3，尝试使用样式属性;未定义不是一个字符串，它是一个内置变量;而且您不需要两次获得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"); 
     } 
    } 
});

答

那里将两件事情：

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所有元素，也可以添加一种新的用于背景位置的数据样式，但不能将背景位置和背景都填充到背景CSS属性中。

作为你的建议，更新我的代码'http://jsfiddle.net/qUEQp/10 /'为什么打开页面时仍然加载所有图像？为什么'（“：可见”）'不工作？谢谢。 – Giberno 2012-02-23 17:51:42

在你发送的jsfiddle例子中，由于display：block; - 如果你希望它们不可见，将它们设置为display：none，那么jQuery是（“：visible”）将会做你想要的。 – 2012-02-23 18:19:26

答

的问题是在这里：

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

你VAR attr_image（其中顺便说一句，你不需要，这是相同的data_style）是下面的字符串（1格）：

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属性名称。

jquery删除attr然后添加attr

相关推荐