Question

我在尝试克隆src =值中的URL字符串时遇到问题。我试图将字符串定义为变量，以便我可以附加＆＃34; background-image＆＃34;带有所述变量的css值。 ... 拍摄并将其用作

中的背景图像

我在$（window）.load事件中这样做，因为我认为必须在DOM中呈现它才能存在它的URL。然而，似乎没有任何工作。我可以提醒（imgURL）;但未能将其插入后台。

这是我到目前为止所拥有的。任何帮助将不胜感激。谢谢！

＆＃13;

$(window).load(function() {
  var imgURL = $('.thumbnail img').each(function() {
    $(this).attr('src');
  });
  $('.fullsize').each(function() {
    $(this).css('background-image', 'url(' + imgURL + ')');
  });

});

＆＃13;

.fullsize {
  width: 200px;
  height: 200px;
}
.thumbnail img {
  width: 75px;
  height: 75px;
  float: left;
  cursor: pointer;
}

＆＃13;

<div>
  <div class="fullsize"></div>
  <div class="thumbnail">
    <img src="http://twiki.org/p/pub/Plugins/GnuPlotPlugin/BlueWhaleSample.png" />
  </div>
</div>

<div>
  <div class="fullsize"></div>
  <div class="thumbnail">
    <img src="http://twiki.org/p/pub/Plugins/GnuPlotPlugin/RosenbrockFunctionSample.png" />
  </div>
</div>

＆＃13;

Answer 1

而不是$(window).load(使用$(document).ready(function()...这将确保DOM已准备好并迭代所有.fullsize并在缩略图内找到图像以替换背景。见下面的脚本

$(document).ready(function() {
  $('.fullsize').each(function() {
    var imgURL = $(this).next('.thumbnail').find('img').attr('src');
    $(this).css('background-image', 'url(' + imgURL + ')');
  });
});

<强> JSFiddle Demo

Answer 2

在您的代码中imgURL引用包含所有.thumbnail img元素的jQuery对象。

相反，您可以使用下面的.css（）方法在当前src元素的下一个兄弟中查找img元素的fullsize。

$(window).load(function() {
  $('.fullsize').css('background-image', function() {
    return 'url(' + $(this).next().find('img').attr('src') + ')'
  });

});

.fullsize {
  width: 200px;
  height: 200px;
}
.thumbnail img {
  width: 75px;
  height: 75px;
  float: left;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
  <div class="fullsize"></div>
  <div class="thumbnail">
    <img src="http://twiki.org/p/pub/Plugins/GnuPlotPlugin/BlueWhaleSample.png" />
  </div>
</div>

<div>
  <div class="fullsize"></div>
  <div class="thumbnail">
    <img src="http://twiki.org/p/pub/Plugins/GnuPlotPlugin/RosenbrockFunctionSample.png" />
  </div>
</div>

Answer 3

首先 - 我会用你给出的类名包装你的每个div，如下所示：

<div class="mainParent">
  <div class="fullsize"></div>
  <div class="thumbnail">
    <img src="http://twiki.org/p/pub/Plugins/GnuPlotPlugin/BlueWhaleSample.png" />
  </div>
</div>

<div class="mainParent">
  <div class="fullsize"></div>
  <div class="thumbnail">
    <img src="http://twiki.org/p/pub/Plugins/GnuPlotPlugin/RosenbrockFunctionSample.png" />
  </div>
</div>

然后我更愿意在document.ready上进行，如下所示：

$(document).ready(function() {
  $.each('.mainParent',function(){
       $(this).find('.fullsize').css('background-image',$(this).find('img').attr('src'));
  });
});

克隆img src通过jquery用作div背景

3 个答案: