使用JSON响应数据将背景图像样式应用于JS循环项

Question

我正在使用ajax请求来显示drupal帖子的循环。

    $( document ).ready(function() {
$.ajax({
    type:"GET",
    url:"https://www.nba.com/api/1.1/json/?type=photo_gallery&tags=community&size=4",
    success: function(data) {
    let galleriesWrapper = document.getElementById("wrapper--community-galleries");
    function create(tagName, props) {
      return Object.assign(document.createElement(tagName), (props || {}));
    }
    function ac(p, c) {
      if (c) p.appendChild(c);
      return p;
   }
for (var i=0; i< data.content.length; i++) {
var link = create("a", {
  className: "wrapper--single-gallery",
  href: data.content[i].url,
  style: "background-image:url(" + data.content[i].images.large + ")"
});
var videoTitle = create("div", {
  className: "single-gallery--title",
  src: data.content[i].title
});
videoTitle.textContent = data.content[i].title;
ac(galleriesWrapper, ac(link, videoTitle));
      } 
    },
    dataType: "jsonp",
  });
});

我正在从.json文件中提取帖子的图像，并将其作为循环中该特定项目的css背景图像注入。

这一切在Chrome和Firefox中完全正常，但在IE中失败。

我正在使用辅助函数“create”，它使用object.assign来轻松创建和追加DOM元素。

我第一次失败的IE是因为我需要一个object.assign polyfill。没有任何物品出现。

Polyfill：

if (typeof Object.assign != 'function') {
Object.assign = function(target) {
'use strict';
if (target == null) {
  throw new TypeError('Cannot convert undefined or null to object');
}

target = Object(target);
for (var index = 1; index < arguments.length; index++) {
  var source = arguments[index];
  if (source != null) {
    for (var key in source) {
      if (Object.prototype.hasOwnProperty.call(source, key)) {
        target[key] = source[key];
      }
    }
  }
}
  return target;
  };
}

一旦我将其添加到我的JS顶部，循环项目就会显示在IE中，但是我用来注入背景图像样式内联的代码失败了（我看到一个带有ajax请求的正确帖子标题的项目，但是背景是空白的）。

编辑：似乎问题是尝试追加样式属性。我用这个时：

var link = create("a", {
  className: "wrapper--single-gallery",
  href: data.content[i].url,
  style: "background-image:url(" + data.content[i].images.large + ")"
});

使用类名和href创建链接，但不附加style属性。

认为它与我如何拼接json请求数据中的url有关，我尝试使用“color：red”样式。这创建了不将样式标记附加到链接的相同结果。

JS FIDDLE示例：https://jsfiddle.net/nolaandy/w3gfawcg/

Answer 1

问题不是Object.assign itselt。问题是你如何设置样式。

您有两种选择：

1. 将每个样式设置为元素的样式属性 link.style.backgroundImage = "url(" + data.content[i].images.large + ")"
2. 用Object.assign替换_.merge并将样式设置为对象（https://lodash.com/）

   function create(tagName, props) {
       // Replace Object.assign by _.merge (https://lodash.com/)
       return _.merge(document.createElement(tagName), (props || {}));
   }
   
   // ....
   
   var link = create("a", {
      className: "wrapper--single-gallery",
      href: data.content[i].url,
      // Update the styles to be an object
      style: {
          backgroundImage: "url(" + data.content[i].images.large + ")"
     }
   });

我会选择第二个，因为它更干净：https://jsfiddle.net/w3gfawcg/7/

Answer 2

布莱克的回答让我得到了解决方案。谢谢Blake。

这是一个简单的解决方案：

for (var i=0; i< data.content.length; i++) {
var link = create("a", {
  className: "wrapper--single-gallery",
  href: data.content[i].url,
});
$(link).css("background-image", "url(" + data.content[i].images.large + ")");
}

来自Blake / Mozilla：“不应该通过直接为style属性指定字符串来设置样式（如elt.style =”color：blue;“），因为它被认为是只读的，因为style属性返回CSSStyleDeclaration对象也是只读的。相反，可以通过为样式属性赋值来设置样式。“

这很奇怪，因为Firefox正确地运行了原始代码，即使我做错了。