Question

我试图根据数组项或对象项的数量追加并设置div的背景图像（两者都做同样的事情，所以我想使用其中一个）。但是，当我这样做时，div正在被正确地添加到父div中，但是只有一个图像被添加到所有这些图像中，只有三个div应该具有相同的背景图像但是我看到所有这些都是相同的他们任何人都可以解释原因吗？

JS

这是使用数组的版本。

var plane_images = ["images/Top.png", "images/ata21.png", "images/ata26.png", "images/Top.png", "images/Top.png"];

for(var img = 0; img < plane_images.length; img++){
    $("#menu").append("<div class='schematics'></div>");
    $(".schematics").css("background-image", "url(" +plane_images[img] +")");
    console.log(plane_images[img]);
}

这是面向对象的版本。

var Plane_Images = {
    top: "images/Top.png",
    structure: "images/ata21.png",
    electrics: "images/ata26.png",
    fuel: "images/Top.png",
    hydraulics: "images/Top.png"
}

for(var images in Plane_Images){
    var image_src = Plane_Images[images];

    $("#menu").append("<div class='schematics'></div>");
    $(".schematics").css("background-image", "url(" +image_src +")");
    console.log(image_src); 
}

我应该注意的一件事是每个控制台日志都显示正确的值传递。

HTML

<body>
    <div id="header"></div>
    <div id="holder">
        <div id="menu"></div>
        <div id="plane_image"></div>
        <div id="sub_menu"></div>
    </div>
    <div id="footer"></div>
</body>

Answer 1

不是添加元素，而是立即选择它，您可以逐个创建元素并在将它们添加到DOM之前对其进行样式化。

$menu = $("#menu");

for(var images in Plane_Images){
  var image_src = Plane_Images[images];
  $schematic = $("<div></div>");
  $schematic.addClass("schematics");
  $schematic.css("background-image", "url(" + image_src +")");
  // you can log the element to the console to debug it here
  console.log($schematic);

  $menu.append($schematic);
}

这种方法还缓存了菜单元素，以便在循环的每次迭代中花费额外的时间来评估jQuery选择器，因此它也可以更快地工作。

同样，如果你想使用数组而不是对象，那么你可以使用jQuery $.each方法

$.each(Plane_Images, function(image_src) {
  $schematic = $("<div></div>");
  $schematic.addClass("schematics");
  $schematic.css("background-image", "url(" + image_src +")");

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

Answer 2

$("#menu").append("<div class='schematics'></div>");
$(".schematics").css("background-image", "url(" +image_src +")");

您正在选择课程.schematics的所有元素，而不仅仅是您之前创建的元素。

这应该有效：

for(var images in Plane_Images){
    var image_src = Plane_Images[images];

    $("<div class='schematics'></div>")    // create a new div with class "schematics"
        .css("background-image", "url(" +image_src +")")    // set the image as background
        .appendTo("#menu");    // append this new div to #menu

    console.log(image_src); 
}

Answer 3

使用ID：

var Plane_Images = {
  top: "images/Top.png",
  structure: "images/ata21.png",
  electrics: "images/ata26.png",
  fuel: "images/Top.png",
  hydraulics: "images/Top.png"
}

var i=1;
for(var images in Plane_Images){
  var image_src = Plane_Images[images];

  $("#menu").append("<div class='schematics' id='bgImage"+i+"'></div>"); // add ID
  $("#bgImage"+i).css("background-image", "url(" +image_src +")"); // reference ID not class
  console.log(image_src); 
  i++; // increase i so no multiple IDs
}

Answer 4

你正在课堂上设置背景，为什么最后的图像会覆盖所有divs背景。请使用id作为

for(var img = 0; img < plane_images.length; img++){
    $("#menu").append("<div class='schematics'"+i+"></div>");
    $("#schematics"+i).css("background-image", "url(" +plane_images[img] +")");
    console.log(plane_images[img]);
}

根据数组或对象项的数量设置背景图像

4 个答案: