jQuery 在 div 中查找图像并将 src 保存为变量以用作 css 背景图像

Question

我在一个页面上有几个 div，每个 div 中有 1 个随机生成的图像。我需要能够找到每个图像的图像源值并将它们保存到变量中。然后我需要将这些图像作为背景 css 分配给页面上的其他元素。例子：

<div class="wrapper div1"><img src="/image1.png" /></div>
<div class="wrapper div2"><img src="/image2.png" /></div>
<div class="wrapper div3"><img src="/image3.png" /></div>

<div class="background div1"></div>
<div class="background div2"></div>
<div class="background div3"></div>

<div class="wrapper div1"><img src="/image1.png" /></div>
<div class="wrapper div2"><img src="/image2.png" /></div>
<div class="wrapper div3"><img src="/image3.png" /></div>

<div class="background div1"></div>
<div class="background div2"></div>
<div class="background div3"></div>

这段代码什么都不做。我在这一切都错了吗？关于我在这里缺少什么的任何想法？谢谢

Answer 1

css-propertybackground-image不支持no-repeat. 此外，您的报价不匹配。

以下应该工作：

$(function() {
  var div1Image = $('.wrapper.div1').find('img').attr('src');
  var div2Image = $('.wrapper.div2').find('img').attr('src');
  var div3Image = $('.wrapper.div3').find('img').attr('src');
  $('.background.div1').css('background-image', 'url(' + div1Image + ')');
  $('.background.div2').css('background-image', 'url(' + div2Image + ')');
  $('.background.div3').css('background-image', 'url(' + div3Image + ')');
});

或者使用background代替background-image

演示

这可能对您的脚本有所改进：

$(function() {

  $('.wrapper').find('img').each(function(index){
        var src = $(this).attr('src');
      $('.background').eq(index).css('background', 'url(' + src + ') no-repeat');
  });

});

这与元素的数量无关。

演示2