javascript - JS代码的诡异渲染

Question

我有这个代码

cuthtml += '<div style="background-image:url("'+response.images[ii].attachment_image_src+'"); background-position:center center; background-size:cover" class="cut-image6" data-id="'+data_id+'" image-id="'+image_id+'" post-author="'+post_author+'">';

但是当它被渲染时，它会像这样出现：

<div class="cut-image6" post-author="33073" image-id="162015" data-id="4" background-size:cover"="" center;="" background-position:center="" me_1352171624-200x200.jpg");="" bangstyle="" uploads="" wp-content="" www.bangstyle.com="" http:="" style="background-image:url(">

不知道为什么我得到反对票...

正确的代码不应该被破坏。我想知道为什么它会这样爆发。我需要逃避什么吗？

Answer 1

看起来你的问题在这里：

style="background-image:url("'+response.images[ii].attachment_image_src+'");

渲染后，您的元素将如下所示：

<div style="background-image:url("/some/url");"></div>

如您所见，嵌套的双引号会导致一些问题。相反，使用转义的单引号：

style="background-image:url(\''+response.images[ii].attachment_image_src+'\'); ...

Answer 2

尝试使用：
                                                                                                   v

cuthtml += '<div style="background-image:url(\''+response.images[ii].attachment_image_src+'\'); background-position:center center; background-size:cover" class="cut-image6" data-id="'+data_id+'" image-id="'+image_id+'" post-author="'+post_author+'">';

用\'而不是"箭头指向的地方。