当我点击另一个元素的 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);
})
现在,无论我点击哪个 div,控制台都会返回 images/Top.png
,这是第一个和最后一个 div 的图像。
最佳答案
像这样的东西应该可以工作......首先在 data-url 中设置 URL,然后点击检索并将其更改为主 div。
在 for 循环中将行更新为 this ....
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);
});
关于javascript - 更改元素的背景图像以匹配单击元素的背景图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29604917/