创建div并添加背景图片

Question

我已经设法在想要的位置创建div，但是当添加背景图片时，我无法做到。第一次尝试这个，这样裸露在我身上。

我创建div的循环，然后我试图在相同的循环中添加一个背景图像。我不知道这是问题还是别的，如果是这样的话，请帮我做另一个。

我试过做类似itemContainer[i]但我无法让它工作。

更新：原因是我的数组是空的，不知道我在做什么错误。

var cicon = []; 

$.ajax({ 
    url: '/json/test.json', 
    dataType: 'json', 
    type: 'get', 
    cache: false, 
    success: function(data) { 
     $(data.test).each(function(index, value) { 
      cicon.push(value.Icon); 
      /*console.log(value.Icon) works here, 
      so there's something wrong when I'm adding it to the array.*/ 
     }); 
    } 
}); 

for (var i = 0, n = 10; i < n; i++) { 
    var itemContainer = document.createElement("div"); 
    itemContainer.id = "div" + i; 
    itemContainer.innerHTML = "item" + i; 

    itemContainer.style.width = "86px"; 
    itemContainer.style.height = "86px"; 
    itemContainer.style.margin = "5px"; 
    itemContainer.style.border = "2px solid black"; 
    itemContainer.style.borderRadius = "10px"; 
    itemContainer.style.float = "left"; 

    var iconstring = 'url(\'' + cicon[i] + '\')'; 
    itemContainer.style.backgroundSize = "100% 100%"; 
    itemContainer.style.backgroundImage = iconstring; 


    document.getElementById('page').appendChild(itemContainer); 
} 

如果你想知道，这个数组包含的URL看起来像这样：https://steamcdn-a.akamaihd.net/apps/440/icons/earbuds.f6dc85683202f2530ae8728880f4a47d4b013ea8.png

Answer 1

如果重新声明：

var cicon = []; 

你只是清空数组变量。 (how do i empty an array in javascript)

实施例：

var cicon = []; 
 

 
function doWork() { 
 
    for (var i = 0; i < cicon.length; i++) { 
 
    var itemContainer = document.createElement("div"); 
 
    itemContainer.id = "div" + i; 
 
    itemContainer.innerHTML = "item" + i; 
 

 
    itemContainer.style.width = "86px"; 
 
    itemContainer.style.height = "86px"; 
 
    itemContainer.style.margin = "5px"; 
 
    itemContainer.style.border = "2px solid black"; 
 
    itemContainer.style.borderRadius = "10px"; 
 
    itemContainer.style.float = "left"; 
 

 
    var iconstring = 'url(\'' + cicon[i] + '\')'; 
 
    itemContainer.style.backgroundSize = "100% 100%"; 
 
    itemContainer.style.backgroundImage = iconstring; 
 

 

 
    document.getElementById('page').appendChild(itemContainer); 
 
    } 
 
} 
 
$(function() { 
 
    $.ajax({ 
 
    url: '/json/BotCopper.json', 
 
    dataType: 'json', 
 
    type: 'get', 
 
    cache: false, 
 
    success: function (data) { 
 
     $(data.BotCopper).each(function (index, value) { 
 
     cicon.push(value.Icon); 
 
     doWork(); 
 
     }); 
 
    }, 
 
    error: function (jqXHR, textStatus, errorThrown) { 
 
     // this is only for test 
 
     cicon = ['https://rawgit.com/Pixabay/jQuery-flexImages/master/images/1.jpg', 'https://rawgit.com/Pixabay/jQuery-flexImages/master/images/2.jpg', 
 
       'https://rawgit.com/Pixabay/jQuery-flexImages/master/images/3.jpg', 'https://rawgit.com/Pixabay/jQuery-flexImages/master/images/4.jpg', 
 
       'https://rawgit.com/Pixabay/jQuery-flexImages/master/images/5.jpg', 'https://rawgit.com/Pixabay/jQuery-flexImages/master/images/6.jpg', 
 
       'https://rawgit.com/Pixabay/jQuery-flexImages/master/images/7.jpg', 'https://rawgit.com/Pixabay/jQuery-flexImages/master/images/8.jpg', 
 
       'https://rawgit.com/Pixabay/jQuery-flexImages/master/images/9.jpg', 'https://rawgit.com/Pixabay/jQuery-flexImages/master/images/10.jpg']; 
 
     doWork(); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<div id="page"></div>

相反，除去行：

var cicon = []; 

结果是：

window.onload = function() { 
 
      var cicon = ['https://rawgit.com/Pixabay/jQuery-flexImages/master/images/1.jpg', 'https://rawgit.com/Pixabay/jQuery-flexImages/master/images/2.jpg', 
 
       'https://rawgit.com/Pixabay/jQuery-flexImages/master/images/3.jpg', 'https://rawgit.com/Pixabay/jQuery-flexImages/master/images/4.jpg', 
 
       'https://rawgit.com/Pixabay/jQuery-flexImages/master/images/5.jpg', 'https://rawgit.com/Pixabay/jQuery-flexImages/master/images/6.jpg', 
 
       'https://rawgit.com/Pixabay/jQuery-flexImages/master/images/7.jpg', 'https://rawgit.com/Pixabay/jQuery-flexImages/master/images/8.jpg', 
 
       'https://rawgit.com/Pixabay/jQuery-flexImages/master/images/9.jpg', 'https://rawgit.com/Pixabay/jQuery-flexImages/master/images/10.jpg']; 
 

 

 
      for (var i = 0, n = 10; i < n; i++) { 
 
       var itemContainer = document.createElement("div"); 
 
       itemContainer.id = "div" + i; 
 
       itemContainer.innerHTML = "item" + i; 
 

 
       itemContainer.style.width = "86px"; 
 
       itemContainer.style.height = "86px"; 
 
       itemContainer.style.margin = "5px"; 
 
       itemContainer.style.border = "2px solid black"; 
 
       itemContainer.style.borderRadius = "10px"; 
 
       itemContainer.style.float = "left"; 
 

 
       var iconstring = 'url(\'' + cicon[i] + '\')'; 
 
       itemContainer.style.backgroundSize = "100% 100%"; 
 
       itemContainer.style.backgroundImage = iconstring; 
 

 

 
       document.getElementById('page').appendChild(itemContainer); 
 
      } 
 
     }

<div id="page"></div>

Answer 2

你的脚本没有什么不对，但你需要cicon中的元素。 e.g

var cicon = ["url1","url2",...];

入住这里工作的例子：Div Background image