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

Posted 2023-03-05

【中文标题】通过 jquery 克隆 img src 以用作 div 背景

【英文标题】：clone img src to use as a div background via jquery

【发布时间】：2015-07-26 21:04:11

【问题描述】：

我在尝试克隆 src= 值中的 URL 字符串时遇到问题。 我正在尝试将字符串定义为变量，以便可以将“背景图像”css值附加到所述变量中。 ... 在

中获取一个并将其用作背景图像

我在 $(window).load 事件中这样做，因为我认为必须在 DOM 中呈现它才能显示它的 URL。 但是，似乎没有任何效果。我可以提醒（imgURL）；但未能将其插入 的后台。

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

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

);

.fullsize 
  width: 200px;
  height: 200px;

.thumbnail img 
  width: 75px;
  height: 75px;
  float: left;
  cursor: pointer;

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

【参考方案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

【讨论】：

完美！谢谢你。我走在正确的轨道上。我错过了 .find() 方法，因此它不会遍历每个类。

【参考方案2】：

在您的代码中，imgURL 指的是一个包含所有 .thumbnail img 元素的 jQuery 对象。

您可以做的是使用下面的 .css() 方法在当前 fullsize 元素的下一个兄弟元素中查找 img 元素的 src。

$(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>

【参考方案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'));
  );
);