Question

目前，我有这个功能。

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

这就是HTML

<table>
    <tr>
    <td>Customize RAM</td>
    </tr>
    <tr>
    <td><input id="rangePoints" type="range" min="1024" max="32768" value="1" step="1024"/><br/><br/></td></td>
    </tr>
    <tr>
    <td>Price: </td>
    <td><input id="price" style="width: 50px;" type="text" value="10" readonly /><br/> </td>
    </tr>
    <tr>
<td>Quantity: </td>
<td><input id="qty" style="width: 50px;" type="text" value="1" readonly /></td>
 </tr>
 <tr>
 <td>Total Price: </td>
 <td><input type="text" id="total" readonly /></td>
 </tr>
</table>

目前，它的作用是......乘以数量*价格并在总价格字段中显示该值。我想要的是，每当我们在范围点滑块中移动一步时，总价格字段应该增加10。

因此，1024的总价格为10，当我们移动到下一个滑块值（2048）时......总价格应为20。

javascript中需要进行哪些更改才能使其正常工作？

感谢。

Answer 1

滑块值/ 1024 * 10为您提供10,20,30直到320（最大滑块值32768）

Answer 2

嘿，我已经对你的代码进行了一些改进，现在工作正常

JS CODE：

$(function () {
 $("#rangePoints").change(function () {
    var qty = $("#rangePoints").val();
    var price = $("#price").val();
    var res = qty / 1024;
    $("#qty").val(res);
    $("#total").val(res * price);

 });
});

jsfiddle上的

LIVE DEMO

注意：到目前为止，滑块字段在视觉上不是滑块，所以我猜你需要手动更改滑块的值，但代码很好，当你使用实际的滑块组件运行时它会起作用顺利。

快乐编码：）

增加每个滑块步骤的值

2 个答案: