Question

我有一个stackoverflow在我的上一个问题中帮助我使用javascript函数。该函数创建了一个div，然后将两个表单输入字段附加到新创建的div中。该函数接受了4个参数。其中一个是表单输入字段的值。问题是如果单个引号（撇号）在值中它会破坏函数。我正在使用PHP开发并使用jQuery。我已经尝试过addslashes（），addcslashes（$ text，'“'）和json_encode（），这些都适用于双引号而不是单引号。我做错了什么？

由于撇号，Link-1被打破了。 Link-2按原样工作，具有“苏打”值。

示例：

<?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>

Answer 1

在链接1的onclick属性中，您在双引号HTML属性中使用未转义的双引号JavaScript字符串。 onclick属性最终设置为return add_item('xyz', ，而开放标记的其余部分不是有效的HTML。将PHP标记周围的双引号更改为单引号可以解决该问题。

结果属性定义将为
onclick="return add_item('xyz', 'I\'m Frustrated', '45.99', '#item_box1');"
我很确定这对HTML和JavaScript都有效。

Answer 2

您在双引号内封装了带有单引号的字符串，因此您无需添加斜杠。该代码现在试图逃避一个不需要转义的角色。

要么不添加斜杠，要么封装在单引号内，EG：

<a class="link-button" onclick="return add_item('xyz', '<?php echo $text;?>', '45.99', '#item_box1');">Add Item to Box 1</a>

Answer 3

正如@Sam上面所说，试着这样做：

<a class="link-button" onclick="return add_item('xyz', '<?php echo $text;?>', '45.99', '#item_box1');">Add Item to Box 1</a>

它应该可以正常工作。

将引号传递给javascript函数

3 个答案: