javascript - 在 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>");

我建议您考虑使用带有语法高亮显示的编辑器，因为它几乎不可能遗漏此类错误。