如何在 jQuery 中“引用”字符串？答案

【问题标题】：How to "Quote" a String in jQuery?如何在 jQuery 中“引用”字符串？
【发布时间】：2014-02-10 01:15:31
【问题描述】：

信息：我有一些 javascript 代码，我将在下面显示，我遇到了引号问题。

html = [];
style = 'class=odd';
html.push('<li '+style+' onclick=SelectItem("'+ele.id+'","'+idItem+'","'+dsItem+'","'+qtItem+'"); >'+id+' - '+$iObjItensListaVenda.result.ds_item[i]+'</li>');

如上所示，我有从 JSON 对象中获取的字符串。

问题：但是当我试图将它作为函数参数放在<li> 元素的onClick 事件上时，我生成的html <li> 元素变得完全没有格式：

<li natural,"150");="" white="" american="" onclick="SelectItem("descItem1","2",TELHA" class="odd">00002 - TELHA AMERICAN WHITE NATURAL</li>

我想要什么： 我需要一个像函数一样的解决方案，可能已经存在于 jQuery 中，以引用我的字符串。像QuoteStr("s t r i n g"); 一样变成""s t r i n g""。

也许你在抱怨：

变量ele 是一个html <input> 元素。
变量idItem 仅包含数字，它们来自 JSON 对象。
变量dsItem是一个包含项目描述的字符串，它也来自JSON对象。
变量qtItem只包含数字，是物品的数量，也是JSON格式的。

【问题讨论】：

onclick = 'SelectItem("desc...","we..")';
这是一个处理转义引号的完整答案：stackoverflow.com/a/9756789/470480
How do I escape quotes in HTML attribute values?的可能重复
理智的解决方案是使用 jQuery 绑定事件处理程序，而不是构建 HTML 字符串。
@FelixKling 这将是有问题的，因为我有动态参数，如果我想每个绑定一个，就会出现问题，因为我的 <li> 没有任何标识符。

标签： javascript jquery html json quotes

【解决方案1】：

理智的解决方案是使用 jQuery to build the element 并绑定事件处理程序，而不是构建 HTML 字符串：

var $li = $('<li />', {
    "class": "odd",
    on: {
       click: function() {
           SelectItem(ele.id, idItem, dsItem, qtItem);
       }
    },
    text: id + ' - ' + $iObjItensListaVenda.result.ds_item[i]
});

如果您在循环中执行此操作并且变量最终具有错误的值，请参阅JavaScript closure inside loops – simple practical example。或者，您可以使用 jQuery 的 .data API 来设置和获取这些值。

【讨论】：

当我需要将大量<li> 附加到我想要的<ul> 时，如何实现此方法？目前我正在使用一个数组将所有<li> 存储在一个循环中，然后使用document.getElementById('my_div').innerHTML = array.join(''); 将其放入 ul 中。
在循环中一一追加？这不慢吗？
您也可以在循环之后一次附加所有这些。 .append 接受一个 DOM 元素数组。或者，您可以将每个 li 元素添加到 jQuery 对象中，然后附加那个。
怎么样？因为我只有一个 $li 变量来存储一个自定义 <li>
var $lis = []; ... $lis.push($li.get(0)); ... $('#ulid').append($lis); 或 var $lis = $(); ... $lis.add($li); ... $('#ulid').append($lis);。我假设您知道如何向数组添加值，因为您已经在原始代码中这样做了。

【解决方案2】：

在onClick 中尝试使用\" 而不是'

$(".container").append("<a href='javascript:void(0)' onClick=\"showField('"+data.name+"','"+data.text+"');\">Edit</a>");

【讨论】：

【解决方案3】：

您可以在字符串中使用引号，方法是用反斜杠转义它们。

var text = "s t r i n g";
"\"" + text + "\"" === "\"s t r i n g\"";

来源：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String

【讨论】：

【解决方案4】：

您总是可以使用反斜杠来转义引号：

console.log('te\'st'); // te'st
console.log("te\"st"); // te"st

你可以对你的字符串做同样的事情，但我建议你把整个事情重写成更有用的东西。我的意思是不使用字符串来构建对象，而是直接构建对象。

例如：

var li = document.createElement('li');
li.className = myClass;
li.onclick = function(){/*...*/};

使用 jQuery 变得更加容易。

【讨论】：

请注意，这不适用于属性值内的引号。
@KevinB 属性似乎是错误的，即使它们最初来自 JSON……但是，我的回答是关于修复 onclick 部分……有很多混乱。但我真的会重写整件事。