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

如果有人想知道，该数组包含如下所示的网址：https://steamcdn-a.akamaihd.net/apps/440/icons/earbuds.f6dc85683202f2530ae8728880f4a47d4b013ea8.png

Answer 1

如果您重新声明：

var cicon = [];

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

示例：

＆＃13;

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

＆＃13;

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

＆＃13;

相反，删除行：

var cicon = [];

结果是：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您的脚本没有任何问题，但您需要cicon中的元素。例如

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

点击此处查看工作示例：Div Background image

创建div并向其添加背景图像

2 个答案: