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

user 发表于 Dev

用户

我试图在单击另一个元素的div时更改holder 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);
})

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

卡利什

像这样的事情应该工作.....首先在data-url中设置URL，然后单击“检索”并将其更改为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);
});

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。