在Jquery

Question

我正在尝试添加一个包含属性的列表项，但每次运行它都会出错。你知道我的代码有什么语法问题吗？

<div class="subway-map" data-columns="12" data-rows="10" data-cellSize="40" data-legendId="legend" data-textClass="text" data-gridNumbers="true" data-grid="true" data-lineWidth="8">
    <ul data-color="#ff4db2" data-label="jQuery Widgets">          
        <li data-coords="2,2"><a href="#">North Ave</a></li>
        <li data-coords="4,2"><a href="#">South</a></li>
        <li data-coords="6,2"><a href="#">West</a></li>
    </ul>

    <ul data-color="red" data-label="jQuery Interactions" class="map2></ul>
</div>      

$(".subway-map").subwayMap({ debug: true });
$(".map2").append("<li data-coords="2,4">Test</li>"); // This is the issue

Answer 1

问题是因为您使用双引号分隔字符串文字并在字符串中使用双引号。您可以通过在字符串本身周围使用单引号来解决此问题。试试这个：

$(".map2").append('<li data-coords="2,4">Test</li>');

或者你可以为两者使用双引号，但你需要在字符串中使用\来转义它们：

$(".map2").append("<li data-coords=\"2,4\">Test</li>");

我建议您使用带语法高亮的编辑器，因为它几乎不可能错过这样的错误。

Answer 2

如上所述 here ：

  

如果您在字符串中使用一种形式的引用，则可能希望将另一种形式用作文字。

你追加的内部双引号打破了字符串。用单引号替换它们以正确处理它：

 $(".map2").append("<li data-coords='2,4'>Test</li>");

Answer 3

"内"没有正确的转义或连接。

替换

 $(".map2").append("<li data-coords="2,4">Test</li>"); // <---This is the issue

与

 $(".map2").append('<li data-coords="2,4">Test</li>'); 

或

 $(".map2").append("<li data-coords=\"2,4\">Test</li>");

Answer 4

双引号存在问题，请改用单引号。试试这个：

$(".map2").append("<li data-coords='2,4'>Test</li>");

Answer 5

您可以使用此

$(".map2").append("<li data-coords='2,4'>Test</li>");

OR

$(".map2").append('<li data-coords="2,4">Test</li>');