Question

我正在动态生成像这样输出的HTML。 [uri]表示图像的绝对URL。每个HTML块都有不同的图像。我需要动态地将此网址设为每个rotation-bg的背景图片。

<div class="rotation-bg">
  <span class="url visuallyhidden">[uri]</span>
</div>

<div class="rotation-bg">
  <span class="url visuallyhidden">[uri]</span>
</div>

<div class="rotation-bg">
  <span class="url visuallyhidden">[uri]</span>
</div>

...

我可以使用下面的代码使用一个HTML块来完成此操作。问题是有多个HTML块，因此变量不再有效。我需要单独定位每个块。

var bgImg = $('.rotation-bg .url').text();

$('.rotation-bg').css('background-image', 'url(' + bgImg + ')');

我可以使用下面的代码遍历每个块，但我不知道如何使用此变量更改每个块的背景图像。

$('.rotation-bg .url').each(function(){
    var bgImg = $(this).text();

    $('.rotation-bg').css('background-image', 'url(' + bgImg + ')');
});

Answer 1

你真的非常接近。在您的每个功能中，您同时将所有.rotation-bg div作为目标，这样他们就可以使用最后一个图像URL作为背景。如果您将其更改为定位您所定位的.url范围的父级，则会单独点击每个父级。

$(this).parent().css('background-image', 'url(' + bgImg + ')');

JS在这里小提琴 - http://jsfiddle.net/9D89h/

使用each（）动态添加背景图像

1 个答案: