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

【问题标题】：Setting background image baed on number of array or object items根据数组或对象项的数量设置背景图像
【发布时间】：2015-06-16 11:23:07
【问题描述】：

我正在尝试根据数组项或对象项的数量附加和设置 div 的背景图像（两者都做同样的事情，所以我想使用其中一个）。但是，当我这样做时，div 被正确地添加到父 div 中，但只有一个图像被添加到所有这些中，只有三个 div 应该具有相同的背景图像，但我看到所有这些都相同.谁能解释一下为什么？

这是使用数组的版本。

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>

【问题讨论】：

$(".schematics") 选择所有具有 .schematics 类的 div，而不仅仅是您在上面一行中创建的那个 ;)
@Andreas 所以我需要在其中添加一个each(function(){}) 吗？
我已将我的评论放在答案中，因为它更具可读性:)

标签： javascript jquery css arrays oop

【解决方案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);
});

【讨论】：

Plane_Images 是一个对象。看问题的第二部分。
@charlietfl，他正在用这个答案解决面向对象的版本
糟糕我只看到了数组

【解决方案2】：

您在类的基础上设置背景，这就是为什么最后一张图片会覆盖所有 div 背景。请像使用 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]);
}

【讨论】：

【解决方案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
}

【讨论】：

【解决方案4】：

$("#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); 
}

【讨论】：