将引号传递给 JavaScript 函数
我在上一个问题中让 stackoverflow 帮助我解决了 javascript 函数问题。该函数创建了一个 div，然后将两个表单输入字段附加到新创建的 div 中。该函数接受 4 个参数。其中之一是表单输入字段的值。问题是，如果值中存在单引号（撇号），则会破坏函数。我正在使用 PHP 和 jQuery 进行开发。我尝试过addslashes()、addcslashes($text,'"') 和json_encode()，它们都适用于双引号，但不适用于单引号。我做错了什么？
Link-1 由于撇号而损坏。 Link-2 按原样工作，其值为“Soda”
：
<?php
$text = "I'm Frustrated";
$text = addslashes($text);
?>
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#item_box1{
width: 300px;
margin: 0 auto;
height: 100px;
border: 1px solid blue
}
#item_box2{
width: 300px;
margin: 0 auto;
height: 100px;
border: 1px solid red
}
.link-button {
color: rgb(0, 0, 255);
cursor: pointer
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.3.js"></script>
<script type="text/javascript">
function add_item( code, title, price, divbox )
{
var idtag, item_title, item_price, item_code;
// Generate an id based on timestamp
idtag = "div_" + new Date().getTime();
// Generate a new div.
$( divbox ).append( "<div id=\"" + idtag + "\"></div>" );
if ( divbox == "#item_box1" )
{
item_title = $("<input/>", {
type: 'text',
name: "box1_item_title[]",
value: title
});
item_price = $("<input/>", {
type: 'text',
name: "box1_item_price[]",
value: price
});
// Show in the document.
$( "#" + idtag ).append( item_title, item_price );
}
else
{
item_code = $("<input/>", {
type: 'text',
name: "box2_item_code[]",
value: code
});
item_title = $("<input/>", {
type: 'text',
name: "box2_item_title[]",
value: title
});
// Show in the document.
$( "#" + idtag ).append( item_code, item_title );
}
}
</script>
</head>
<body>
<a class="link-button" onclick="return add_item('xyz', "<?php echo $text;?>", '45.99', '#item_box1');">Add Item to Box 1</a>
<br>
<a class="link-button" onclick="return add_item('123', 'Soda', '1.99', '#item_box2');">Add Item to Box 2</a>
<br>
<br>
<div id='item_box1'></div>
<div id='item_box2'></div>
</body>
页面的源代码最终看起来像这样：
<a class="link-button" onclick="return add_item('xyz', "I\'m Frustrated", '45.99', '#item_box1');">Add Item to Box 1</a>
I had stackoverflow help me with a javascript function in my last question. The function created a div, then appended two form input fields into the newly created div. The function took in 4 arguments. One of which is the value of the form input field. The problem is if a single quote(apostrophe) is in the value it breaks the function. I'm developing in PHP and using jQuery. I've tried addslashes(), addcslashes($text,'"'), and json_encode() which all work great for double quotes but not single quotes. What am i doing wrong?
Link-1 is broken because of an apostrophe. Link-2 works as is, with its "Soda" value.
Example:
<?php
$text = "I'm Frustrated";
$text = addslashes($text);
?>
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#item_box1{
width: 300px;
margin: 0 auto;
height: 100px;
border: 1px solid blue
}
#item_box2{
width: 300px;
margin: 0 auto;
height: 100px;
border: 1px solid red
}
.link-button {
color: rgb(0, 0, 255);
cursor: pointer
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.3.js"></script>
<script type="text/javascript">
function add_item( code, title, price, divbox )
{
var idtag, item_title, item_price, item_code;
// Generate an id based on timestamp
idtag = "div_" + new Date().getTime();
// Generate a new div.
$( divbox ).append( "<div id=\"" + idtag + "\"></div>" );
if ( divbox == "#item_box1" )
{
item_title = $("<input/>", {
type: 'text',
name: "box1_item_title[]",
value: title
});
item_price = $("<input/>", {
type: 'text',
name: "box1_item_price[]",
value: price
});
// Show in the document.
$( "#" + idtag ).append( item_title, item_price );
}
else
{
item_code = $("<input/>", {
type: 'text',
name: "box2_item_code[]",
value: code
});
item_title = $("<input/>", {
type: 'text',
name: "box2_item_title[]",
value: title
});
// Show in the document.
$( "#" + idtag ).append( item_code, item_title );
}
}
</script>
</head>
<body>
<a class="link-button" onclick="return add_item('xyz', "<?php echo $text;?>", '45.99', '#item_box1');">Add Item to Box 1</a>
<br>
<a class="link-button" onclick="return add_item('123', 'Soda', '1.99', '#item_box2');">Add Item to Box 2</a>
<br>
<br>
<div id='item_box1'></div>
<div id='item_box2'></div>
</body>
The source of the page ends up looking like this:
<a class="link-button" onclick="return add_item('xyz', "I\'m Frustrated", '45.99', '#item_box1');">Add Item to Box 1</a>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
在链接 1 的
onclick属性中，您在双引号 HTML 属性内使用未转义的双引号 JavaScript 字符串。onclick属性最终设置为return add_item('xyz',，并且开放标记的其余部分不是有效的 HTML。更改 PHP 标记周围的双引号单引号应该可以解决该问题，结果属性定义将是
onclick="return add_item('xyz', '我很沮丧', '45.99', '#item_box1');"我非常确定这对于 HTML 和 JavaScript 都有效。
In the
onclickattribute of link 1, you're using an unescaped double-quoted JavaScript string inside a double-quoted HTML attribute. Theonclickattribute ends up getting set toreturn add_item('xyz',and the remainder of the open tag isn't valid HTML. Changing the double quotes around the PHP tag to single quotes should fix that problem.The resulting attribute definition would then be
onclick="return add_item('xyz', 'I\'m Frustrated', '45.99', '#item_box1');"I'm pretty sure that's valid both for HTML and JavaScript.
您将用单引号封装在双引号内的字符串，因此不需要添加斜杠。该代码现在尝试转义不需要转义的字符。
要么不添加斜杠，要么用单引号封装，EG：
You're encapsulating a string with a single quote inside double quotes, so you don't need to add slashes. That code is now trying to escape a character that doesn't need to be escaped.
Either don't add slashes, or encapsulate within single quotes, EG:
正如@Sam 上面所说，尝试这样做：
它应该可以正常工作。
As @Sam said above, try just doing this:
It should work fine.