使用javascript计算动态输入框的折扣

Discount calculation of dynamic input box using javascript

本文关键字：输入 javascript 计算 动态 使用      更新时间：2023-09-26

我正试图计算折扣价格，我能够做到没有任何问题的单一项目。我也有"添加更多"按钮添加许多项目，因为我可以。因此，在这里，我开始面临计算这些动态添加的输入字段的折扣价的问题。

我默认的单项折扣计算脚本是

$('#discount_1').change(function(){
            var quantity=$('#qty_1').val();
           var percent=$('#discount_1').val();
            var price=$('#price_1').val();
            var tprice = price * quantity
            var discountpercent=percent / 100;
            var discountprice=(tprice * discountpercent );
            $('#total_1').val(tprice - discountprice);
        });

我试着把它改成下面的

 $(":input[id^='discount_']").change(function(){
            var quantity=$(":input[id^='qty_']").val();
           var percent=$(":input[id^='discount_']").val();
            var price=$(":input[id^='price_']").val();
            var tprice = price * quantity
            var discountpercent=percent / 100;
            var discountprice=(tprice * discountpercent );
            $(":input[id^='total_']").val(tprice - discountprice);
        });

计算所有具有以qty_开头的id属性的商品集的折扣，这实际上似乎不能正常工作。

这里是jsFiddle

我已经修改了这个来删除所有的id s。这会清理掉很多多余的垃圾。这是一个小提琴:http://jsfiddle.net/B5T6R/1/

解决方案涉及事件委托。$(":input[id^='discount_']").on('change'的问题是未来的tr s 还不存在，所以没有什么可以绑定的!

解决方案是:

$("#InputsWrapper").on('change', '.discount'

它将监听整个inputtswrapper表的所有未来更改，而不仅仅是针对折扣元素。

问题是您使用的选择器将始终选择与选择器匹配的第一个输入。

因此，(":input[id^='qty_']")将始终匹配第一行的输入。

我建议:

  1. 每次点击AddButton时重新绑定"change"事件。这将也需要.unbind()
  2. 添加类"discount"到所有折扣输入。
  3. 将数量，价格等的选择器更改为相对于被更改的输入。
IE: 

$('.discount').unbind().change(function(){
  var $parentRow = $(this).parent().parent();
  var quantity=$(":input[id^='qty_']", $parentRow).val();
});

使用所有这些id不是一个好主意:#qty_1， #qty_2等。相反，为所有输入提供相同的类名以挂钩，例如:

<input class='discount' type='text' name='discount'/>
<input class='quantity' type='text' name='quantity'/>

然后使用Jquery遍历DOM并获取相关数据。在这种情况下，您必须爬到最近的td，然后返回到。quantity类，如下所示:

 $(".discount").change(function(){
        var quantity = $(this).closest('td').find('.quantity').val();
    });

你遇到了几个问题。

首先，当DOM初始化时，只有页面上存在的":input[id^='discount_']"才会添加此更改处理程序-所有通过Add More Field链接添加的新行都不会绑定此处理程序。您可以通过将处理程序附加到通过.on包含所有字段的容器来解决这个问题，以便在该容器内触发的每个更改事件将根据指定的选择器进行检查。我将您的小提琴分叉来演示:http://jsfiddle.net/gLz9B/1/

<>之前$ (" # InputsWrapper")。("改变"、":输入[id ^ = ' discount_ ']",函数(){…}）;之前

第二个问题是，您使用的qty_、total_、price_和折扣_选择器将返回数组，而不是局限于发生更改的特定行。在我的fiddle fork中，我做了一个字符串替换，以获得附加到元素id的唯一数字，然后构建所有其他输入的id，而不是使用=^来选择它们。这不是限制作用域的唯一方法，但对于示例代码，它是有效的。

<>之前Var id = this.id.replace('discount '，');Var quantity=$("#qty_" + id).val();
相关文章：