使用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();