Question

更新：通过删除逗号之间的空格，我成功地摆脱了其中一个随机等号/＆＃34; s。但是，它似乎正在插入＆＃34; =＆＃34;＆＃34; ＆＃34;只要字符串中有空格，用户名就会返回（firstName lastName）。知道为什么会这样做吗？它还插入＆＃34; =＆＃34;＆＃34; ＆＃34;就在＆＃34;＆gt;加入...＆＃34;之前，考虑到那里没有空间，这很奇怪......

 $("#ride").append('<div class= "style"><img src = "'
                 + snapshot.val().id
                 + '" style="width:68px;height:68px;"/><p>' 
                 + snapshot.val().user 
                 + '</p><ul class = "styling"><li>'  
                 + snapshot.val().when 
                 + ' '
                 + snapshot.val().from 
                 + ' - ' 
                 + snapshot.val().to 
                 + '</li><li>' 
                 + snapshot.val().comments 
                 + '</li><button type="button" class="btn btn-outline-info" onclick = "initMessenger(\"'  
                 + snapshot.val().user
                 + '\",\"'
                 + snapshot.val().reference 
                 + '\")\">join this ride</button></ul></div>');

我使用jquery编写动态HTML内容。

data.forEach(function(snapshot) {
     $("#ride").append('<div class= "style"><img src = "'
                 + snapshot.val().id
                 + '" style="width:68px;height:68px;"/><p>' 
                 + snapshot.val().user 
                 + '</p><ul class = "styling"><li>'  
                 + snapshot.val().when 
                 + ' '
                 + snapshot.val().from 
                 + ' - ' 
                 + snapshot.val().to 
                 + '</li><li>' 
                 + snapshot.val().comments 
                 + '</li><button type="button" class="btn btn-outline-info" onclick = "initMessenger(\"' 
                 + snapshot.val().user 
                 + '\" , \"'
                 + snapshot.val().reference 
                 + '\")">join this ride</button></ul></div>');
             });

        console.log('ID : ' + $("#ride").html());
});

这些是我的jquery代码创建的div。目前，我得到了一个＆＃34; Uncaught SyntaxError：Unexpected token}＆＃34;单击此div中的任一按钮时出现错误消息：

   <div class="style"><img src="https://lh3.googleusercontent.com/-XdUIqdMkCWA/AAAAAAAAAAI/AAAAAAAAAAA/4252rscbv5M/photo.jpg" style="width:68px;height:68px;">
    <p>Liz</p>
    <ul class="styling">
        <li>Wed Mar 29 2017 07:00 AM - 09:00 PM</li>
        <li>test 2 </li><button type="button" class="btn btn-outline-info" onclick="initMessenger(" liz="" smith "=" " ,=" " "-kfsqld0eras9ri4v9es ")"="">join this ride</button></ul>
</div>
<div class="style"><img src="https://lh3.googleusercontent.com/-XdUIqdMkCWA/AAAAAAAAAAI/AAAAAAAAAAA/4252rscbv5M/photo.jpg" style="width:68px;height:68px;">
    <p>Liz</p>
    <ul class="styling">
        <li>Thu Mar 23 2017 02:00 AM - 05:30 AM</li>
        <li>TEST THREE</li><button type="button" class="btn btn-outline-info" onclick="initMessenger(" liz="" smith "=" " ,=" " "-kfsvhs6q-x-bdhz8jfk ")"="">join this ride</button></ul>
</div>

为什么我的initMessenger在所有地方都调用所有这些随机等号并加上引号？我如何摆脱它们？

Answer 1

为避免逃脱噩梦，可以使用新的ES6 Template literals

喜欢这样

closing()

现在没有必要转义任何字符，例如： $("#ride").append(` <div class="style"> <img src="${snapshot.val().id}" style="width:68px;height:68px;"/> <p>${snapshot.val().user}</p> <ul class="styling"> <li>${snapshot.val().when} ${snapshot.val().from} - ${snapshot.val().to}</li> <li>snapshot.val().comments</li> <button type="button" class="btn btn-outline-info" onclick="initMessenger('${snapshot.val().user}','${snapshot.val().reference}')">join this ride</button> </ul> </div>`);

Answer 2

你似乎在这里加了一个额外的双引号：

+ '\")">join this ride</button></ul></div>');

因此它形成了以下字符串：

onclick = "initMessenger("51234" , "997")">join this ride</button></ul></div>

（数字只是一些随机值）

如果您将字符串更改为：

+ '\")>join this ride</button></ul></div>');

输出看起来像这样，它应该可以正常工作：

onclick = "initMessenger("51234" , "997")>join this ride</button></ul></div>

如何在jquery中正确地转义双引号

2 个答案: