-1

目前，我有这个功能。

$(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 需要进行哪些更改才能使其像这样工作？

谢谢。

4

2 回答 2

0

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

于 2013-07-26T12:49:27.983 回答
0

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

JS代码：

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

 });
});

jsfiddle 上的现场演示

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

快乐编码:)

于 2013-07-26T13:06:32.007 回答