更改元素的背景图像以匹配单击元素的背景图像答案

【问题标题】：Changing background image of element to match that of clicked element更改元素的背景图像以匹配单击元素的背景图像
【发布时间】：2015-06-18 17:44:45
【问题描述】：

当我单击另一个元素的 div 时，我试图让持有者 div 的背景图像发生变化。背景图像需要更改为单击的 div 的背景图像。我该怎么做呢？我认为以下脚本会起作用，但它只是将其更改为对象中最后一个图像的脚本。

HTML

<div id="holder">
    <div id="menu"></div>
    <div id="plane_image"></div>
    <div id="sub_menu"></div>
</div>

保存图像和其他信息的对象

var Plane_Images = {
    Skin: {
        src: "images/Top.png"
    },
    Structure: {
        name: "Structure Schematic",
        src: "images/ata21.png"
    },
    Electrics: {
        name: "Electrics Schematic",
        src: "images/ata26.png"
    },
    Fuel: {
        src: "images/Top.png"
    }
}

为可点击的 div 设置背景图片

for(var images in Plane_Images){
    var id = images.toLowerCase();
    var image_src = Plane_Images[images].src;
    var schematic = $("<div data-id='" +id +"_menu'><div class='label'><p>" +images +"</p></div></div>");
    schematic.addClass("schematics");
    schematic.css("background-image", "url(" +image_src +")");

    $("#menu").append(schematic);
}

这是我想要设置背景图像以匹配上一个循环中单击的 div 的位置。

$(".schematics").on("click", function(){
    $("#plane_image").css("background-image", "url(" +image_src +")");
    console.log(image_src);
})

现在，无论我点击哪个 div，控制台都会返回 images/Top.png，这是第一个和最后一个 div 的图像。

【问题讨论】：

它在HTML中，我将它添加到问题中
在 data 属性中设置 url 并在点击时更改它...这样可以吗？
你能给它加个小提琴吗
@Kalish 你的意思是data-url="objectkey.src"?
@Kushal，我可以，但你不会看到图像，当然我可以简单地将背景图像更改为背景颜色

标签： javascript jquery

【解决方案1】：

试着让你的代码适应这个：

$(".schematics").on("click", function(){
    $("#plane_image").css("background-image", $(this).css('background-image'));
    console.log($(this).css('background-image'));
})

你可以在事件中使用$(this)来获取被点击的元素。

【讨论】：

这告诉我如何查看与单击的元素相关联的背景图像，而不是如何更改#plane_image div 以匹配它。
@User 我的代码的第二行正在更改#plane-image css 以匹配背景。
啊，抱歉，没看到。对不起

【解决方案2】：

这样的东西应该可以工作.....首先在 data-url 中设置 URL，然后单击检索并将其更改为主 div。

在 for 循环中，将行更新为此 ....

var schematic = $("<div data-id='" +id +"_menu' data-url='" +image_src +     "'><div class='label'><p>" +images +"</p></div></div>");

$(".schematics").on("click", function(){
var url = $(this).data('url')
$("#plane_image").css("background-image", url);
});

【讨论】：