Question

确定，这是我正在使用的代码： -

<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帮助解决这个问题）。

在上面的代码中，只有第一个滑块工作（价格为10.50）......其中，第二个滑块不起作用。

我需要有多个这些滑块，每个滑块都必须执行数量*价格功能。我怎么能做到这一点？

感谢。

Answer 1

你有不同的元素具有相同的id。 id在页面上应该是唯一的。它只会查找第一个id，因为它们应该只使用一次。

如果您想在页面上多次重复使用某些内容，请使用class es和$(".className")代替$("#idName")

下一个滑块如何工作？

1 个答案: