javascript - 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>

$(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 + ') no-repeat");
    $('.background.div2').css('background-image', "url(' + div2Image + ') no-repeat");
    $('.background.div3').css('background-image', "url(' + div3Image + ') no-repeat");
});     

但是这段代码什么也没做。我这一切都错了吗？关于我在这里缺少什么有什么想法吗？谢谢

Answer 1

CSS属性background-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

Demo

<小时/>

这可能对您的脚本有一点改进:

$(function() {

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

});

这与元素的数量无关。

Demo2