Jquery - 动态添加字段和值的乘法

Question

这是我下面的代码。 可以通过单击“添加更多”按钮动态添加字段，如果需要也可以删除字段。 我需要将输入值相乘并获得连续字段相乘结果的总计。 如何在 Jquery 中实现这一点？

    <div class="my-form">
    <form name="form" >
        <p class="text-box">
    <select name="size[]" id="box1">
    <option value="20">20</option>
    <option value="35">35</option>
    <option value="50">50</option>
    <option value="100">100</option>
    </select>
    x
    <input name="qty[]" id="box2"  type="text" value="" />
   = <input name="multiply[]" id="answer" type="text" value="" />
       <a class="add-box" href="#">Add More</a>
        </p>

        <input type="submit" value="Submit" /> 
        </form>
        </div>
        Grand Total: <span class="GrandTotal">0.00</span><br/><br/>



      <script>
        jQuery(document).ready(function($){
            $('.my-form .add-box').click(function(){
                var n = $('.text-box').length + 1;
                if( 10 < n ) {
                    alert('Stop it!');
                    return false;
                }
                var box_html = $('<p class="text-box"> <select name="size[]" id="box1' + n + '"> <option value="20">20</option> <option value="35">35</option> <option value="50">50</option> <option value="100">100</option> </select> x <input type="text" name="qty[]" value="" id="box2' + n + '" /> = <input name="multiply[]" id="answer' + n + '"  value="" /> <a href="#" class="remove-box">Remove</a></p>');
                jQuery('#my-form').append(box_html);
                box_html.hide();
                $('.my-form p.text-box:last').after(box_html);
                box_html.fadeIn('slow');
                return false;
            });

            $('.my-form').on('click', '.remove-box', function(){
                $(this).parent().css( 'background-color', '#FF6C6C' );
                $(this).parent().fadeOut("slow", function() {
                    $(this).remove();
                    $('.box-number').each(function(index){
                        $(this).text( index + 1 );
                    });
                });
                return false;
            });
        });
        </script>

Click here for Working Example!

Answer 1

所以这是你必须做的：

1) 与其使用id 属性，不如使用class 属性来简化jQuery..

<select name="size[]" id="box1" class="box1">
<option value="20">20</option>
<option value="35">35</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
x
<input name="qty[]" id="box2" class="box2" type="text" value="" />
= <input name="multiply[]" id="answer" class="answer" type="text" value="" />

注意：不要忘记更改您的 Add More 函数..

2) 以下是计算总数的方法，通过更改 <input> 或 <select> 触发

function calTotal(){
    var total = 0;
    $(".my-form .text-box .answer").each(function(){       
        total += Number($(this).val());
    });
    $(".GrandTotal").text("");
    $(".GrandTotal").text(total);
}
$(".my-form").on('input', '.box2', function(){
    var total_row = $(this).val();
    total_row *= $(this).siblings(".box1").val();
    $(this).siblings(".answer").val(total_row);
    calTotal();
});
$(".my-form").on('change', '.box1', function(){
    var total_row = $(this).val();
    total_row *= $(this).siblings(".box2").val();
    $(this).siblings(".answer").val(total_row);
    calTotal();
});

看看这个Fiddle..