Question

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

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

作业示例（FIDDLE）：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);
    });

无法使用jquery获取数据属性

3 个答案: