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

Question

我正在尝试计算折扣价格，我可以对单个项目没有任何问题。 我也有“添加更多”按钮，可以添加很多项目。 因此，在这里，我开始在为这些动态添加的输入字段计算折价时遇到问题。

我对单个商品的默认折扣计算脚本是

$('#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);

        });

计算具有id属性（以qty_开头）的所有项目集的折扣，这实际上似乎无法正常工作。

这是我的jsFiddle

Answer 1

我已对此进行了修改，以删除所有id 。 这将清理很多多余的废话。 这是一个小提琴： http : //jsfiddle.net/B5T6R/1/

解决方案涉及事件委托。 $(":input[id^='discount_']").on('change'在于，将来的tr 尚不存在 ，因此没有什么可绑定的！

解决方案是：

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

它将侦听整个InputsWrapper表上的所有将来更改，而不仅是折扣元素。

Answer 2

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

因此，（“：input [id ^ ='qty_']”）将始终与第一行的输入匹配。

我建议：

1. 每次单击AddButton时，重新绑定“更改”事件。 这也将需要.unbind（）。
2. 将类别“折扣”添加到所有折扣输入中。
3. 将数量，价格等选择器更改为相对于已更改的输入。

IE：

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

Answer 3

使用所有这些ID（例如＃qty_1，＃qty_2等）不是一个好主意。相反，请为所有输入提供相同的类名称以供使用，例如：

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

然后使用优质的ole Jquery遍历DOM并获取相关数据。 在这种情况下，您必须爬到最接近的td，然后下移以获得.quantity类，如下所示：

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

希望这可以帮助。

Answer 4

您遇到了两个问题。

首先，仅在初始化DOM时在页面上存在的":input[id^='discount_']"上添加了此更改处理程序-通过“添加更多字段”链接添加的所有新行将没有此处理程序界。 您可以通过将处理程序附加到容器.on解决此问题，您可以通过.on来访问所有字段，以便针对指定的选择器检查该容器内触发的每个change事件。 我已分叉了您的小提琴以进行演示： http : //jsfiddle.net/gLz9B/1/

$('#InputsWrapper').on("change", ":input[id^='discount_']", function(){
   ...
});

第二个问题是您使用的qty_，total_，price_和discount_选择器将返回数组，而不是局限于发生更改的特定行。 在我的提琴琴叉中，我进行了字符串替换，以将唯一编号附加到元素的id上，然后构建所有其他输入的id，而不是使用= ^进行选择。 这不是限制范围的唯一方法，但是在给出示例代码的情况下它可以工作。

var id = this.id.replace('discount_','');
var quantity=$("#qty_" + id).val();