加载一个img src作为它使用jQuery驻留的Div的背景图像 [英] Load an img src as a background image for the Div it resides in with jQuery

问题描述

我正在使用SharePoint，我必须处理使用开源的一些公司问题......另外还要让网站易于编辑。我正在使用jQuery和Cycle v.3.0.2来运行一个滑块。我要撕开我的滑块以允许它使用标题，所以我将使用每个幻灯片的单独div。我希望有一个img元素和一个文本元素作为标题运行，并且由于滑块是全宽的，我喜欢它，如果我可以拉取img标签的src属性并将其作为背景图像应用于整体div当特定的幻灯片加载时。有没有办法让这种情况发生？我看到编码是这样的：

I'm working with SharePoint and I have to deal with a few corporate issues in using Open Source... plus have to make the site easy for someone to edit. I'm using jQuery and Cycle v.3.0.2 to run a slider. I'm about to rip apart my slider to allow it to use captions, so I will use an individual div per slide. I want to have an img element and a text element to run as a caption, and since the slider is full width, I'd love it if I can pull that img tag's src attribute and apply it to the overall div as a background image when the particular slide loads. Is there a way to make this happen? I see the coding being like this:

<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内联添加背景图像？此外，还有一个名为active的活动幻灯片的类，如果这有助于我获取正确的src属性。

Is there a way that I can call it to add a style tag to the .sliderIMG div and add the background image inline using the img src that resides in the this div? Also, there is a class for the active slide named 'active' if that helps me in getting the correct src attribute.

推荐答案

你有两个明显的方法;一个是迭代< img> 元素：

You have two obvious approaches; one is to iterate over the <img> elements:

// 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中，以下功能实现相同的功能：

In plain JavaScript the following enables the same functionality:

// 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 。
  
  
  • JavaScript:
    • Array.from().
    • Array.prototype.forEach().
    • Array.prototype.slice().
    • document.querySelectorAll().
    • Function.prototype.call().
    • Node.parentNode.
    
    
    • nearest（） 。
    
    
    • css（） 。
    
    
    • each（） 。
    
    
    • find（） 。
    
    
    • prop（） 。
    
    
    • closest().
    • css().
    • each().
    • find().
    • prop().

    这篇关于加载一个img src作为它使用jQuery驻留的Div的背景图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！