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

当我点击另一个元素的div时，我试图改变holder div的背景图像。背景图像需要更改为单击的div的背景图像。我将如何执行此操作？我认为下面的脚本可以工作，但它只是将其更改为对象中最后一个图像的脚本

HTML

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

设置可单击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);
}

---

现在，控制台正在返回

images/Top.png

，这是第一个和最后一个div的图像，而不管我单击哪个div。

尝试使您的代码适应以下情况：

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

---

您可以在事件中使用

$（this）

来获取已单击的元素。

类似的操作应该可以……首先在数据URL中设置URL，然后单击retrieve并将其更改为main 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);
});

var原理图=$（“”+图像+“
”）；
$（“.schematics”）。在（“单击”，函数（）{
var url=$（this.data（'url'））
$（“平面图像”）.css（“背景图像”，url）；
});

它在HTML中，我会将它添加到问题中设置数据属性中的url，并在单击时更改它。。。那行吗？你能给我加把小提琴吗it@Kalish你的意思是像

data url=“objectkey.src”

？@Kushal，我可以，但你看不到图像，当然我可以简单地将背景图像更改为背景颜色，告诉我如何查看与单击的元素关联的背景图像，不是如何更改

#平面图像

div以匹配它。@用户我代码的第二行正在更改

#平面图像

css以匹配背景。啊，抱歉，没有看到。很抱歉

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

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