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에서는 실패합니다.

DOM 요소를 쉽게 만들고 추가하기 위해 obect.assign을 사용하는 도우미 함수 "create"를 사용하고 있습니다.

object.asign polyfill이 필요했기 때문에 IE가 처음 실패했습니다. 항목이 표시되지 않았습니다.

Polyfill : 내 JS의 상단이 추가되면

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

, 루프 항목은 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로 만들어 지지만 스타일 속성이 추가되지 않습니다.

json 요청 데이터의 URL에 연결되는 방법과 관련이 있다고 생각하여 스타일 "color : red"를 사용하려고했습니다. 이렇게하면 스타일 태그를 링크에 추가하지 않은 것과 같은 결과가 생성됩니다.

JS 뿐인 예 : https://jsfiddle.net/nolaandy/w3gfawcg/

Answer 1

블레이크의 응답은 솔루션에 나를 이끌었다. 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 + ")"); 
} 

: 색상 "스타일이 elt.style = 같이 (스타일 속성에 직접 문자열을 할당하여 설정할 수 없습니다": 블루 ; "), 이는 읽기 전용으로 간주되기 때문에 스타일 속성은 읽기 전용 인 CSSStyleDeclaration 객체를 반환하지만 스타일 속성에 값을 할당하여 스타일을 설정할 수 있습니다."

내가 잘못하고 있어도 파이어 폭스가 원본 코드를 제대로 실행했기 때문에 이상하게 보입니다.

Answer 2

문제가 Object.assign입니다. 문제는 스타일을 설정하는 방법입니다.

당신은 두 가지 옵션이 있습니다

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

가 _.merge에 의해 Object.assign를 교체하고 객체로 스타일을 설정할 요소의 스타일 속성에

1. 세트마다 스타일 (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/