下一個滑塊如何工作？

-3

<html> 
<head> 
<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 

<script> 
$(function() { 
    $("#rangePoints").change(function() { 
     var qty = $("#rangePoints").val(); 
     var price = $("#price").val(); 
     $("#qty").val(qty); 
     $("#total").val(qty*price); 
    }); 
}); 
</script> 

</head> 
<body> 
Price: <input id="price" type="text" value="10.50" readonly /><br/> 
Quantity: <input id="qty" type="text" value="1" readonly /> 
<input id="rangePoints" type="range" min="1" max="100" value="1"/><br/><br/> 

Total Price: <input type="text" id="total" readonly /> 


Price: <input id="price" type="text" value="15.50" readonly /><br/> 
Quantity: <input id="qty" type="text" value="1" readonly /> 
<input id="rangePoints" type="range" min="1" max="100" value="1"/><br/><br/> 

Total Price: <input type="text" id="total" readonly /> 
</body> 
</html>

（感謝charles360與此JavaScript的幫助）。

在上面的代碼中，只有第一個滑塊有效（其價格爲10.50）......其中第二個不起作用。

我需要有多個這些滑塊，每個滑塊必須執行數量*價格函數。我會如何做到這一點？

謝謝。

來源

2013-07-26 user2619381

** HTTP：//reference.sitepoint.com/html/core-attributes/id ** – lifetimes

你有不同的元素有相同的id。 id s在頁面上應該是唯一的。它只會查找第一個id，因爲它們只能使用一次。

如果你想要的東西，可重新使用的網頁上多次使用class ES和$(".className")代替$("#idName")

來源

2013-07-26 11:30:37 user568458

下一個滑塊如何工作？

回答

相關問題