无法使用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 ）

Answer 2

$(document).ready(function() {

    // Targeting 2nd li element inside #packages
    var price=$("#packages li").eq(2).data("cost");

    // create a span element with text 'price'
    var amount=$("<span>"+price+"</span>");

    // append as last child of the form
    $("#form").append(amount);
});

Answer 3

您需要按名称查找数据属性-并查看LI的属性。

您还需要构建html字符串并将其正确附加到＃ticket-price

工作示例（字段） ： http : //jsfiddle.net/ojLo8ojz/

JS：

    $(document).ready(function(){
        var price = $("#packages li[data-cost]").attr("data-cost");
        var amount = "<span> "+price+"</span>";
        $("#ticket-price").append(amount);
    });