Question

我正在尝试计算折扣价格，我可以在没有任何问题的情况下完成单个项目。我还添加了更多＆＃39;按钮可以添加很多项目。所以在这里，我开始在计算这些动态添加的输入字段的折扣价时面临问题。

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

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

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

所以，（＆＃34;：input [id ^ =＆＃39; qty _＆＃39;]＆＃34;）将始终匹配第一行的输入。

我建议：

重新绑定＆＃34;更改＆＃34;单击事件evertime AddButton。这将也需要.unbind（）。
添加课程＆＃34;折扣＆＃34;所有折扣输入。
将数量，价格等的选择器更改为相对于已更改的输入。

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'/>

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

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

希望这有帮助。

Answer 4

你遇到了几个问题。

首先，只有初始化DOM时页面上存在的":input[id^='discount_']"才会添加此更改处理程序 - 通过Add More Field链接添加的所有新行都不会绑定此处理程序。您可以通过将处理程序附加到容器来解决此问题，所有字段都位于via .on中，以便针对指定的选择器检查在该容器中触发的每个更改事件。我已经分道扬声示威：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();

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

4 个答案: