使用 jQuery 加载一个 img src 作为它所在的 Div 的背景图像

Question

我正在使用 SharePoint，我必须处理一些使用开源的公司问题...此外还必须使网站易于编辑。我正在使用 jQuery 和 Cycle v.3.0.2 来运行滑块。我即将撕开我的滑块以允许它使用字幕，所以我将在每张幻灯片上使用一个单独的 div。我想要一个 img 元素和一个 text 元素作为标题运行，并且由于滑块是全宽的，如果我可以拉出该 img 标签的 src 属性并将其应用到整个 div 作为背景图像，我会喜欢它当特定幻灯片加载时。有没有办法做到这一点？我看到编码是这样的：

<div id="slider">
<div class="sliderIMG">
    <img src="http://urURL.com/img1" />
    <h4>Your Caption for Slider <a class="button" href="#" target="_blank">Button</a></h4>
</div>
<div class="sliderIMG">
    <img src="http://urURL.com/img1" />
    <h4>Your Caption for Slider <a class="button" href="#" target="_blank">Button</a></h4>
</div>
<div class="sliderIMG">
    <img src="http://urURL.com/img1" />
    <h4>Your Caption for Slider <a class="button" href="#" target="_blank">Button</a></h4>
</div>

有没有一种方法可以调用它来将样式标签添加到 .sliderIMG div 并使用驻留在此 div 中的 img src 内联添加背景图像？此外，如果这有助于我获得正确的 src 属性，则有一个名为“active”的活动幻灯片类。

Answer 1

您有两种明显的方法；一种是遍历<img> 元素：

// selects all <img> elements within an element of the
// class 'sliderIMG', then iterates over that collection:
$('.sliderIMG img').each(function(){

    // finding the closest ancestor element matching
    // the '.sliderIMG' selector, and updating its
    // 'background-image', property-value using the
    // css() method, to the property held in the
    // <img> element's 'src' property:
    $(this).closest('.sliderIMG').css('background-image', this.src);
});

或者您可以遍历 .sliderIMG 元素：

// selecting all '.sliderIMG' elements, and updating its
// 'background-image' property, using the anonymous function
// of the css() method; in which we find the descendant <img>
// element(s) and then return the 'src' property of the
// first <img> in that collection:
$('.sliderIMG').css('background-image', function (){
    return $(this).find('img').prop('src');
});

在纯 JavaScript 中，以下代码启用了相同的功能：

// using document.querySelectorAll() to retrieve all
// elements matching the supplied CSS selector:
var images = document.querySelectorAll('.sliderIMG img'),

    // using Array.from() to convert the returned
    // HTMLCollection into an Array:
    imageArray = Array.from( images );

    // or, in older browsers; here we use
    // Array.prototype.slice() with
    // Function.prototype.call() to create an
    // Array from the HTMLCollection:
    // imageArray = Array.prototype.slice.call(images, 0);

// iterating over the Array of images with
// Array.prototype.forEach():
imageArray.forEach(function (img) {
    // the first argument of the forEach
    // anonymous function is a reference
    // to the Array element of the Array
    // over which we're iterating.

    // here we find the parentNode of the <img>
    // and directly update its 'background-image'
    // to that of the <img> element's src property:
    img.parentNode.style.backgroundImage = img.src;
});

参考资料：

• JavaScript：
  • Array.from()。
  • Array.prototype.forEach()。
  • Array.prototype.slice()。
  • document.querySelectorAll()。
  • Function.prototype.call()。
  • Node.parentNode。
• jQuery:
  • closest()。
  • css()。
  • each()。
  • find()。
  • prop()。

Answer 2

var src = $('.sliderIMG').children('img').attr('src');
$('.sliderIMG').css('background-image', 'url(' + src + '');

https://jsfiddle.net/3h6pqyod/

正如另一位发帖者所说，您可以像这样遍历所有 div：

$('.sliderIMG').each(function() {
    var src = $(this).children //etc...