Javascript - 变量中的双引号

Question

我正在尝试使用 javascript 动态创建 html 标签。请引用下面的代码。

function getPhotosSuccess(data) {

    if (data.d.results.length > 0) {

        var response = data.d.results;
        var innerhtml = "";

        $.each(response, function(key, value) {
            var newItem = '<div class="item"><div class="well"><a href="' + value.ServerRelativeUrl + '" data-lightbox="roadtrip" data-title="' + value.ListItemAllFields.Image_x0020_Description + '"><img class="img-responsive" src="' + value.ServerRelativeUrl + '" alt=""></a></div><div><p>' + value.ListItemAllFields.Image_x0020_Description + '</p></div></div>';
            innerhtml += newItem;
        });

        $("#masonryPicGallery .row:eq(0)").html(innerhtml);

    } else {

        console.log("empty response from server"); 
    }
}

我的问题是，此处变量 value.ListItemAllFields.Image_x0020_Description 包含一个以双引号开头的字符串。

所以我的 html 呈现如下 -->

谁能帮我解决这个问题。

Answer 1

如果您正在使用 jQuery(并且您的代码段中存在 Lightbox 属性表明您正在使用)，您可以使用它来避免使用不可靠的字符串连接来构建您的元素:

// create DOM entries without variables
var $newItem = $('<div class="item"><div class="well"><a data-lightbox="roadtrip"><img class="img-responsive" alt=""></a></div><div><p></p></div></div>');

// then populate the appropriate fields using jQuery DOM traversal
$newItem.find('a').attr({
     'href': value.serverRelativeUrl,
     'data-title': value.ListItemAllFields.Image_x0020_Description
   }).find('img')
     .attr('src', value.ServerRelativeUrl);

$newItem.find('p').text(value.ListItemAllFields.Image_x0020_Description);