無法獲取jquery的數據屬性

我試圖檢索data-cost("#packages")並將其附加到旁邊的#form。我沒有在控制檯中發現任何錯誤。我看不清楚哪裏出了問題。無法獲取jquery的數據屬性

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>

來源

2014-12-31 user3484925

$(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); 
});

來源

2014-12-31 19:31:55

這不是一個靈活的解決方案，因爲你是專門說明看第二個鋰 - 如果他添加另一個鋰 - 這破壞 - 這是壞。 – remixdesign

對於這個工作，因爲它是你必須編輯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）

來源

2014-12-31 19:26:10 JCOC611

另一個問題$（「＃form」）。next（）。next（）。append'不會附加在＃ticket-price的旁邊...... – pete

嗨，修改了我的代碼以上的建議（都）。但是問題仍然存在。 – user3484925

@ user3484925：如果您的*兩個*我的解決方案都不起作用，因爲它們互相排斥。您必須* *更改HTML *或*更改jQuery選擇器。 – JCOC611

您需要按名稱查找數據屬性 - 然後查看LI的。

您還需要建立自己的HTML字符串，妥善其追加到＃門票價格

WOKING例（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); 
    });

來源

2014-12-31 19:39:04 remixdesign

無法獲取jquery的數據屬性

回答

相關問題