將img src作爲背景圖像加載到jQuery中的Div中

Question

我正在使用SharePoint，並且我必須處理使用Open Source時出現的一些公司問題......並且必須使網站變得輕鬆有人來編輯。我使用jQuery和Cycle v.3.0.2來運行滑塊。我即將撕開我的滑塊以允許它使用字幕，因此我將爲每張幻燈片使用一個單獨的div。我想要一個img元素和一個文本元素作爲標題運行，並且由於滑塊是全角，如果我能夠拉動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股利和使用駐留在IMG SRC中添加背景圖片內嵌的方式在這個div？另外，如果這有助於我獲得正確的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...