从jQuery中的数量输入框计算价格

Posted 2023-02-23

【中文标题】从jQuery中的数量输入框计算价格

【英文标题】：Calculate price from quantity input box in jQuery

【发布时间】：2012-09-25 12:54:37

【问题描述】：

我在 jQuery 中从 Quantity 计算价格时遇到了一个小问题。这些是我的输入框。

Quantity: <input type="text" style="width: 50px;" name="quantity" id="quantity" class="txt" value="1" />

Price: <input type="text" style="width: 50px;" name="item_price" id="item_price" class="txt" value="2990" />

Total Price: <input type="text" style="width: 50px;" name="total_price" id="total_price" class="txt" value="" />

【问题讨论】：

无。除非你解释你想要达到的目标。它应该基于用户输入吗？来自输入字段中的硬编码值？加载页面时应该发生这种情况吗？在飞行中？ ...

【参考方案1】：

我假设您想要公式或如何获取输入元素的值：

var quantity = $("#quantity").val();
var iPrice = $("#item_price").val();

var total = quantity * iPrice;

$("#total_price").val(total); // sets the total price input to the quantity * price

alert(total);

为 Keyup 编辑：

$('#quantity').keyup(function() 
   var quantity = $("#quantity").val();
   var iPrice = $("#item_price").val();

   var total = quantity * iPrice;

   $("#total_price").val(total); // sets the total price input to the quantity * price
);

【讨论】：

这有效，但当我改变数量时没有实时/keyup，有什么想法吗？

@HafsteinnMárMásson 包含了一个用于更改数量时的 keyup 示例。希望这会有所帮助。

谢谢，但现在价格不会出现，除非我在数量字段中进行更改，有什么快速解决方法吗？

@HafsteinnMárMásson 价格应该出现在页面加载时。签出：jsfiddle.net/WXyNw

@HafsteinnMárMásson 如果您希望它在价格更改时实时更改，您也需要一个事件处理程序来处理这个问题，您可以复制我为您创建的 keyup 函数并将“#quantity”更改为“ #it​​em_price"

【参考方案2】：

更新以在脚本标签中显示完整示例

如果您想要公式以及如何“看到”变化：

<script type="text/javascript">
    $(function()   //  In jQuery 1.6+ this is same as $(document).ready(function())
        $('#quantity, #item_price')  //  jQuery CSS selector grabs elements with the ID's "quantity" & "item_price"
            .on('change', function(e)   //  jQuery 1.6+ replcement for .live (dynamically asigns event, see jQuery API)
            //  in this case, our event is "change" which works on inputs and selects to let us know when a value is changed
                //  below i use inline if statements to assure the values i get are "Real"
                var quan = $("#quantity").val() != "" ? parseFloat($("#quantity").val()) : 1,  //  Get quantity value
                    pric = $("#item_price").val() != "" ? parseFloat($("#item_price").val()) : 0;  //  Get price value
                $('#total_price').val(pric*quan); // show total
            );
    );
</script>

jQuery API jQuery API .ready() jQuery API Selectors jQuery API .on() jQuery API .live() jQuery API .change() jQuery API .val() inline if

【讨论】：

这就是我的做法。您需要在</body> 部分上方的<Script type="text/javascript"> 中添加以上内容。以防对OP 不明显

实际上，.on 的这种使用并不能代替 live.. 你必须使用委派版本，即 $(staticparent).on('events','elements',function()