JSON div 样式背景图像链接没有斜杠？

Question

我正在使用JSON创建缩略图列表，但对这行代码有问题：

videoHTML += '<div class="user-background" style="background-image: url("' + video.channel.video_banner + '");">';

我可以看到div元素以及其中的所有内容，除了链接之外background-image没有斜杠。

这是我在调试器元素中看到的代码：

<div class="user-background" style="background-image: url(" https:="" static-cdn.jtvnw.net="" jtv_user_pictures="" esl_csgo-channel_offline_image-c9f885982daa1c83-1920x1080.png");"=""><div class="user-background" style="background-image: url(" https:="" static-cdn.jtvnw.net="" jtv_user_pictures="" esl_csgo-channel_offline_image-c9f885982daa1c83-1920x1080.png");"=""><img class="user-logo" src="https://static-cdn.jtvnw.net/jtv_user_pictures/esl_csgo-profile_image-546a0c1883798a41-300x300.jpeg" alt="user image"><p class="user-name">ESL_CSGO</p></div><a href="#" onclick="popup('esl_csgo')"><img class="video-image" src="http://static-cdn.jtvnw.net/previews-ttv/live_user_esl_csgo-320x180.jpg"></a><h1 class="game-name">Counter-Strike: Global Offensive</h1><br><i></i><span class="views-number">41304</span><p class="short-date-format date0">2012-06-11T13:36:21Z</p></div>

你能帮我解释一下我用引号做错了什么吗？(我相信他们导致了这个问题。

以下是让您更好地理解它的代码：

$(document).ready(function(){   
    $.getJSON( "https://api.twitch.tv/kraken/streams", function( data ) {
        var items = [];
        var videoHTML ='<ul>';
        //Get data and create video grid
        $.each(data.streams, function(i, video){ 
            if(i < 9) {  //get only first 9 data
                var videoDate = $.format.date(video.channel.created_at, "MMM dd yyyy");
                videoHTML += '<li class="video-stream ' + video.channel.language + '">';
                videoHTML += '<div class="user-background" style="background-image: url("' + video.channel.video_banner + '");">';
                videoHTML += '<img class="user-logo" src="' + video.channel.logo + '" alt="user image">';
                videoHTML += '<p class="user-name">' + video.channel.display_name + '</p>';
                videoHTML += '</div>';
                videoHTML += '<a href="#" onclick="popup('' + video.channel.name + '')">';
                videoHTML += '<img class="video-image" src="' + video.preview.medium + '"></a>';
                videoHTML += '<h1 class="game-name">' + video.game + '</h1><br/>';
                videoHTML += '<i></i>';
                videoHTML += '<span class="views-number">' + video.viewers + '</span>';
                videoHTML += '<p class="short-date-format date' + i + '">' + videoDate + '</p>';
                videoHTML += '</li>';
                // var userId = "'#userBackground" + i +"'";
                alert(userId);
                // console.log(video._id);
                // console.log(data.streams[i].game);
                // console.log(data.streams[i]._links.self);
                // console.log(data.streams[i].preview.medium);
            } else {
                return false;
            }
        });
        videoHTML += '</ul>';
        videoHTML += '<div class="clearfix"></div>';
        $('#placeholder').html(videoHTML);
    }); //getJson
}); //end ready

Answer 1

更新 我发现了你的问题。您必须将style周围的"更改为 ' .
像这样：

videoHTML += '<div class="user-background" style='background-image: url("' + $.trim(video.channel.video_banner) + '");'>';

在此处查看它与您更正后的代码一起工作。

---

我重写了整个内容，并向您展示了jQuery的一些基本功能。请记住，它不一定更好，但也许更有效，更容易遵循。仅在JS中，就有十几种不同的方法来编写它。在jQuery中，一百万。我可以很容易地把它缩短很多，如果为了我自己，我会做很多不同的事情。但是，我希望这能向您展示jQuery的一些不同用途，以及理解为什么变量控制如此重要。我实际上没有看到charlietfl的代码工作。背景仍然没有显示。但是，正如您将在我的示例中看到的那样，我不仅缩小了">问题"的范围，而且还使它起作用，但没有使用任何花哨的东西。我只是使用了基本的jQuery！

请记住，jQuery有一个写得很好，易于遵循的API。我在这里使用的所有东西都很容易找到！

代码片段

function buildList(data) {
	if (data) {
		var videoHTML = $('<ul />'),
			clearFix = $('<div />', { 'class': '' }),
			items = [];
		$.each(data.streams, function(i, video){
			if(i < 9) {
				var videoDate = video.channel.created_at,	//	$.format.date(video.channel.created_at, "MMM dd yyyy"),
					li = $('<li />', { 'class': 'video-stream' }).addClass(video.channel.language).appendTo(videoHTML),
					div = $('<div />', { 'class': 'user-background' }).appendTo(li),
					imgLogo = $('<img />', { alt: 'user image', 'class': 'user-logo' }).attr('src', video.channel.logo).appendTo(div),
					pUser = $('<p />', { 'class': 'user-name', html: video.channel.display_name }).appendTo(div),
					a = $('<a />', { href: 'javascript:void 0' }).data('vidName', video.channel.name).appendTo(li),
					imgPrev = $('<img />', { 'class': 'video-image' }).attr('src', video.preview.medium).appendTo(a),
					h1 = $('<h1 />', { 'class': 'game-name' }).appendTo(li),
					br = $('<br />').appendTo(li),
					ita = $('<i />').appendTo(li),
					span = $('<span />', { 'class': 'views-number' }).html(video.viewers).appendTo(li),
					pDate = $('<p />', { 'class': 'short-date-format' }).addClass('date' + i).appendTo(li);
				
				//	And now we can zero in on your issue with ez, by moveing that one thing here
				try {
					console.log(video.channel.video_banner);
					div.css('backgroundImage', 'url("' + video.channel.video_banner + '")');
				}
				catch(err) { console.log(err); }
			}
			else return false;
		});
		$('#placeholder').append(videoHTML, clearFix);
	}
}
$(function() {	//	jQuery shorthand for $(document).ready(function(){
	$.getJSON("https://api.twitch.tv/kraken/streams", buildList);
  //  the following uses our STATIC element to assign click event to our DYNAMICALLY added anchors
	$('#placeholder').on('click', '.video-stream a', function(e) { popup($(this).data('vidName')); });
})

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

js小提琴玩！