JSONレスポンスデータを使用してJSループアイテムに背景画像スタイルを適用する

Question

drupal投稿のループを表示するためにajaxリクエストを使用しています。

$(document).ready(function() { 
$.ajax({ 
    type:"GET", 
    url:"https://www.nba.com/pelicans/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では失敗します。

obect.assignを使用してDOM要素を簡単に作成して追加するヘル​​パ関数 "create"を使用しています。

私はobject.asign polyfillが必要だったので、IEが最初に失敗しました。アイテムが表示されませんでした。

ポリフィル：

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リクエストから適切なポストタイトルを持つ項目が表示されますが、背景は空白です）。

EDIT：スタイルプロパティを追加しようとしているようです。 私はこれを使用する場合：

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

リンクはクラス名とHREFを使用して作成されていますが、スタイルプロパティが追加されていません。

jsonのリクエストデータからどのように私がスプライスしたのかと考えて、私はちょうど "color：red"というスタイルを使ってみました。これにより、リンクにスタイルタグを追加しないという同じ結果が得られました。

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

Answer 1

ブレイクの応答がソリューションに私を導きました。ブレイクありがとう。

これは簡単な解決策である。ブレイク/ Mozillaの

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

： 色「スタイルはelt.style =のように（スタイルプロパティに直接文字列を割り当てることによって設定されるべきではない」：青; "）、これは読み取り専用であるため、スタイル属性は読み取り専用のCSSStyleDeclarationオブジェクトを返します。代わりに、スタイルのプロパティに値を割り当てることでスタイルを設定できます。

私が間違っていたとしても、Firefoxが元のコードを正しく実行していたのを見て、これは気のせいです。

Answer 2

問題はありません itseltです。問題はスタイルの設定方法です。

あなたは2つのオプションがあります。要素

link.style.backgroundImage = "url(" + data.content[i].images.large + ")" 

のスタイルプロパティへのすべてのスタイルを設定

1. を_.mergeによってObject.assignを交換し、オブジェクトとしてのスタイルを設定する（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 + ")" 
       } 
   }); 
   

私はクリーナーなので、2番目のものに行きます：https://jsfiddle.net/w3gfawcg/7/