Arkaplan görüntüsünün ayarlanması dizi veya nesne öğesi sayısına göre baed

Divs'in arka plan görüntüsünü, dizi öğelerinin veya nesne öğelerinin sayısına göre eklemeye ve ayarlamaya çalışıyorum (ikisi de aynı şeyi yapıyor, bu yüzden birini veya diğerini kullanmak istiyorum). Ancak, bunu yaptığımda, divler ana div'e doğru şekilde ekleniyor, ancak hepsine yalnızca bir resim ekleniyor, sadece üç div aynı arka plan resmine sahip olmalı, ancak hepsi için aynı görüyorum . Nedenini açıklayan var mı?

JS

Bu bir diziyi kullanan versiyondur.

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

This is the object oriented version.

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

One thing I should note is that each of the console logs are showing me the correct values being passed.

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>
1
$ (". schematics") , yalnızca yukarıdaki satırda oluşturduğunuz birini değil, .schematics sınıfındaki tüm divs'leri seçer;)
katma yazar Andreas, kaynak
$ (". schematics") , yalnızca yukarıdaki satırda oluşturduğunuz birini değil, .schematics sınıfındaki tüm divs'leri seçer;)
katma yazar Andreas, kaynak
Yorumumu biraz daha okunaklı olduğu için cevaba yazdım :)
katma yazar Andreas, kaynak
Yorumumu biraz daha okunaklı olduğu için cevaba yazdım :)
katma yazar Andreas, kaynak
@Andreas o zaman buraya bir her (işlev() {}) eklemem gerekir mi?
katma yazar user4720622, kaynak
@Andreas o zaman buraya bir her (işlev() {}) eklemem gerekir mi?
katma yazar user4720622, kaynak

8 cevap

Öğeyi eklemek yerine, hemen seçtikten sonra, öğeleri tek tek oluşturabilir ve bunları DOM'ye eklemeden önce biçimlendirebilirsiniz.

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

Bu yaklaşım aynı zamanda menü elemanını, jQuery seçiciyi döngünün her yinelemesini değerlendirmek için fazladan zaman harcamak üzere önbelleğe alır, böylece daha hızlı çalışacaktır.


Benzer şekilde, bir nesne yerine bir Dizi kullanmak istiyorsanız, jQuery 'dan yararlanabilirsiniz. $ .each yöntemi

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

  $menu.append($schematic);
});
2
katma
Plane_Images bir nesnedir. Sorunun ikinci bölümüne bak.
katma yazar Dan Prince, kaynak
ayy, benim kötü sadece dizi gördüm
katma yazar charlietfl, kaynak
@charlietfl, bu cevabı içeren nesne yönelimli versiyonunu ele alıyor
katma yazar user4720622, kaynak

Öğeyi eklemek yerine, hemen seçtikten sonra, öğeleri tek tek oluşturabilir ve bunları DOM'ye eklemeden önce biçimlendirebilirsiniz.

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

Bu yaklaşım aynı zamanda menü elemanını, jQuery seçiciyi döngünün her yinelemesini değerlendirmek için fazladan zaman harcamak üzere önbelleğe alır, böylece daha hızlı çalışacaktır.


Benzer şekilde, bir nesne yerine bir Dizi kullanmak istiyorsanız, jQuery 'dan yararlanabilirsiniz. $ .each yöntemi

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

  $menu.append($schematic);
});
2
katma
Plane_Images bir nesnedir. Sorunun ikinci bölümüne bak.
katma yazar Dan Prince, kaynak
ayy, benim kötü sadece dizi gördüm
katma yazar charlietfl, kaynak
@charlietfl, bu cevabı içeren nesne yönelimli versiyonunu ele alıyor
katma yazar user4720622, kaynak

Kimlik kullan:

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
}
0
katma

Kimlik kullan:

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
}
0
katma
$("#menu").append("<div class='schematics'></div>");
$(".schematics").css("background-image", "url(" +image_src +")");

Yalnızca daha önce oluşturduğunuz birini değil, .schematics sınıfındaki tüm öğeleri seçiyorsunuz.

Bu çalışmalı:

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); 
}
0
katma
$("#menu").append("<div class='schematics'></div>");
$(".schematics").css("background-image", "url(" +image_src +")");

Yalnızca daha önce oluşturduğunuz birini değil, .schematics sınıfındaki tüm öğeleri seçiyorsunuz.

Bu çalışmalı:

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

sınıfın temelinde arka plan belirliyorsunuz, bu yüzden neden son divs tüm divs arka planını geçersiz kılıyor. lütfen bunun için kimliği kullanın

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]);
}
0
katma

sınıfın temelinde arka plan belirliyorsunuz, bu yüzden neden son divs tüm divs arka planını geçersiz kılıyor. lütfen bunun için kimliği kullanın

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]);
}
0
katma