javascript - 无法使用 jquery 获取数据属性

Question

我正在尝试检索 data-cost("#packages") 并将其附加到 Ticket-price 旁边的 #form。我在控制台中没有收到任何错误。我无法理解出了什么问题。

JS:

<script src="jquery-1.11.2.js"></script>
<script>
    $(document).ready(function()
      {
        var price=$("#packages").data("cost");
        var amount=$("<span>"+price+"</span>");
        $("#form").next().next().append(amount);

    });
</script>

HTML:

<div id="packages">
    <h2><u>Tourism Packages:</u></h2>
     <ul>
        <li data-name="Southern Travels">Travels Name:  Southern Travels</li>
        <li data-cost="2000">Cost per person:  2000</li>
        <li>Duration:  3 days & 4 nights</li>
     </ul>
</div>

<div id="form">
    <label>Number of persons </label>
    <input id="input"type="text"/ autofocus>
    <p id="ticket-price">Ticket Price</p>
</div>

Answer 1

要使其正常工作，您必须按如下方式编辑 HTML:

<div id="packages" data-name="Southern Travels" data-cost="2000">
    <h2><u>Tourism Packages:</u></h2>
     <ul>
        <li>Travels Name:  Southern Travels</li>
        <li>Cost per person:  2000</li>
        <li>Duration:  3 days & 4 nights</li>
     </ul>
</div>

要么，要么访问 <li> 的数据属性元素而不是 div#packages (即 #packages ul li 而不是 #packages )