jquery - 动态设置多个 div 背景图像与第三个父 div 相同

Question

我的目标是重新创建这种效果:(链接被删除，为其他链接腾出空间，我还没有达到 10 级:/)

在“团队”部分:http://boulderfood.staging.wpengine.com/

使用 CSS 很简单，但我试图使其动态化，以便如果客户将来更改照片，它会自动适应。

(我还没有调整详细的样式，所以现在看起来很酷)

我已经成功地将每个 WP 图像转换为一个 div，并以其自身作为背景。

现在我需要将各个“.ch-info-front”div 设置为与其父“.ch-item”div 具有相同的 BG。

我可以让他们使用行中的最后一个图像，但不是每个图像都有自己的父背景图像。我花了几个小时尝试各种方法，最后决定我需要专家的帮助。这就是我目前所处的位置。

jQuery(document).ready(function($) {

$(".et_pb_team_member_image img").each(function(i, elem) {

    var img = $(elem);
    var img_turned_to_div = $("<div />").css('background-image' , 'url(' + img.attr("src") + ')' );
    var changeBG = $('.ch-info-front').css('background-image', 'url(' + img.attr("src") + ')' );

    img_turned_to_div.addClass("ch-item");
    img.replaceWith(img_turned_to_div);

});
$('.ch-item').prepend( $('.ch-info-wrap') );

});

<小时/>

/////更新/////

越来越近了。非常感谢用户 Digital_Coffee，虽然你的代码没有达到我需要的结果，但我对其进行了一些修改，并且我已经让它重现了每个的 CSS 背景图像 - 但它把它放在了错误的 div 上。

/////更新 2/////

^ 从头开始​​ - 我现在可以使用它:

$(".et_pb_team_member_image img").each(function(i, elem) {

    var img = $(elem);
    var img_turned_to_div = $("<div />").css('background-image' , 'url(' + img.attr("src") + ')' );

    img_turned_to_div.addClass("ch-item");
    img.replaceWith(img_turned_to_div);

});

$('.ch-item').prepend( $('.ch-info-wrap') );

$(".ch-info-front").each(function() {
    $(this).css( 'background-image', $(this).closest('.ch-item').css('background-image') );
});

我想我昨晚太累了，无法把这些放在一起，哈哈。您认为这个脚本怎么样，它可以更有效吗？我对 JS 还很陌生。

Answer 1

这是我想到的。

我知道您必须转<img>进入<div> 。当我查看您元素的链接时，我注意到您的 <div>似乎没有维护 src属性。您可能需要转动src属性变成 data-whatever属性或将其保存在var中在更改 <img> 之前进入<div> .

HTML

<div class="ch-item">
    <div class="ch-info-front" data-imgPath=" What ever your path is to your img from your HTML "></div>
</div>

Javascript

$(".ch-item").each(function() {
var infoFont = $(".ch-info-front")
var $imgLink = $(this).children(infoFont).attr("data-imgPath");
    return $(this).children(infoFont).css({ "background": "url(" + $imgLink + ") no-repeat"});
});