javascript - 创建div并向其中添加背景图片

我设法在需要的地方制作了一个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

最佳答案

如果您重新声明：

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>