动态设置多个 div background-images 与 3rd-parent divs 相同

Question

我的目标是重新创建此效果：（已删除链接以为其他链接腾出空间，我还没有达到 10 级 :/ ）

在此处的 "Team" 部分：http://boulderfood.staging.wpengine.com/

使用 CSS 很容易，但我正在尝试使其动态化，以便如果客户将来更改照片，它会自动适应。

（我还没有调整详细的样式，所以现在看起来很糟糕）

我已经成功地将每张 WP 图片变成 div 并以自身为背景。

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

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

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 = $(elem);
$img_turned_to_div = $("<div />").css('background-image' , 'url("' + $img.attr("src") + '")' );
$changeBG = $('.ch-info-front').css('background-image', 'url("' + $img.attr("src") + '")' );
$img_turned_to_div.addClass("ch-item");
$img.replaceWith($img_turned_to_div);

更新

抱歉，这是您遇到的错误

$img.replaceWith(img_turned_to_div);

这是解决方法

    $img.replaceWith($img_turned_to_div);

Answer 2

这是我想出的。

我了解到您必须将 <img> 转换为 <div>。当我查看您的项目的 link 时，我注意到您的 <div> 似乎没有维护 src 属性。在将 <img> 更改为 <div>.[=21= 之前，您可能必须将 src 属性转换为 data-whatever 属性或将其保存在 var 中]

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"});
});

动态设置多个 div background-images 与 3rd-parent divs 相同

Dynamically set multiple div background-images to be the same as 3rd-parent divs

css

jquery

dynamic

parent-child

background-image