Question

我有这个分割功能，我可以通过单击按钮添加更多字段。我的问题是，如果我添加一个字段，我无法获得确切的金额，如果我删除该字段则返回金额。

示例场景：

enter image description here

上图显示初始数量 -1,000.50 。现在这些是我的问题。

enter image description here

我输入50作为收款人剩余金额的第一个字段，其结果为Payee: 1 [-950.50]。当我添加另一个字段时，它会自动填充金额，我希望-950.50，因为这是剩余金额。但我得到的是第二个字段中的初始量-1,000.50。 如何获取更新的剩余金额？
如果我删除添加的字段，我想添加回金额。对于前者如果该字段为50且剩余金额为-950.50。如果我删除包含50金额的字段，则必须将其添加回剩余金额，并且它将为-1,000.50。 如何追加金额？

以下是我的尝试：

split.html

<table id="dataTable" class="calendar fluid" data-calendar-options='{"maxHeight":70}'"
    <caption> Payee: 1 
        [<span id="remaining">-1,000.50</span>]
    </caption>

    <tbody>
        <tr>
            <td class="week-end" id="p_scents"><br/>
                *Note: Amount totals must equal transaction total and envelopes must be specified to 
                       enable the split button.<br/><br/>

                <p class="button-height">
                    <span class="input">
                        <label class="button orange-gradient">Envelope #1</label>

                        <select name="env[]" class="envelope select compact">
                            <option value="none">(Select)</option>

                            <optgroup label="Category">
                                <option value="1">Internet</option>
                                <option value="2">Savings</option>
                            </optgroup>
                        </select>

                        <input type="text" name="amt[]" placeholder="0.00" size="10" 
                            id="validation-required" class="input-unstyled input-sep validate[required]"
                            onkeyup="calculate(0)">

                        <input type="text" name="note[]" placeholder="note" class="input-unstyled" id="note">
                    </span>

                    <span class="with-tooltip">
                        <img src="{{STATIC_URL}}img/icons/tick.png" title="Default">
                    </span>
                </p><br/>
            </td>
        </tr>
    </tbody>

    <tfoot>
        <tr>
            <td>
                <a href="javascript:{}" id="addScnt" class="button orange-gradient icon-plus-round">
                    Another Envelope
                </a>
            </td>
        </tr>
    </tfoot>
</table>


<script>
    function calculate(difference) {
        var sum = 0;
        $(":text").each(function() {
            amt = replaceCommaDollar(this.value);
            if(!isNaN(amt) && amt.length!=0) {
                sum += parseFloat(amt);
                total = sum;
                difference = -1,000.50 + total                                  
            }
        });

        $("#remaining").html(numberWithCommas(difference.toFixed(2)));

        if(difference == 0){
            $("#split").html("<button type='submit' class='button orange-gradient'>Split Amount</button>");
        }else{
            $("#split").html("<button type='submit' class='button orange-gradient' disabled='disabled'>Split Amount</button>");
        }
    }

    $(function() {
        var scntDiv = $('#p_scents');
        var i = $('#p_scents p').size() + 1;
        var remain_amount = Math.abs(replaceCommaDollar($("#remaining").text())).toFixed(2);

        $('#addScnt').live('click', function() {  
            $('<p class="button-height">'+
              ' <span class="input">'+
              '     <label class="button orange-gradient">' + 'Envelope #' + i + '</label>' +
              '     <select name="env[]" class="envelope select compact">'+
              '         <option value="none" selected="selected">(Select)</option>' +
              '         <optgroup label="Category">' +
              '             <option value="1">Internet</option>' +
              '             <option value="2">Savings</option>' +
              '         </optgroup>' +
              '     </select>' +
              '    <input type="text" name="amt[]" id="split-amount' + i + '" placeholder="0.00" size="10" class="input-unstyled input-sep" onkeyup="calculate(0)" value="'+ remain_amount +'">'+
              '    <input type="text" name="note[]" placeholder="note" class="input-unstyled">'+
              ' </span>'+
              ' <a href="javascript:{}" id="remScnt" class="with-tooltip">Remove</a></p><br/\>'
              ).appendTo(scntDiv);

             $("#remaining").html('0.00');
             $("#split").html("<button type='submit' class='button orange-gradient'>Split Amount</button>");

             i++;
             return false;
        });

        $('#remScnt').live('click', function() {
            if( i > 2 ) {
                test = $('#split-amount'+i).val();
                alert(test);

                $(this).parents('p').remove();

                i--;
            }

            return false;
        });
    });
</script>

Answer 1

如何获取更新的剩余金额？您正在计算文件准备就绪remain_amount，而不是单击添加按钮时。您需要在#addScnt的点击处理程序中移动其计算。只需将其作为该功能的第一行，就应该相应地重新计算。

如何添加金额？我们可以通过读取我们要删除的输入字段中的值来完成此操作。这是修改后的删除点击处理程序来演示。

$('#remScnt').live('click', function() {
    // Might not need the if statement
    if (i > 2) {
        //test = $('#split-amount' + i).val();
        //alert(test);

        var $p = $(this).parents('p');

        // Consider this approach to getting the removed value
        var textValue = $p.find('input[name="amt[]"]').val();
        var numValue = replaceCommaDollar(textValue);

        var $remaining = $("#remaining");
        var remainingValue = replaceCommaDollar($remaining.text());
        var difference = remainingValue - numValue;

        var newRemainingValue = numberWithCommas(difference.toFixed(2)))
        $("#remaining").text(newRemainingValue);

        $p.remove();

        // This might not be needed anymore
        i--;
    }

    return false;
});

请注意，根据我获取删除值的方法，您可能能够摆脱涉及i的逻辑，除非您还有其他工作要做。考虑根据您要删除的元素搜索DOM。这个可能执行速度较慢，但并非不合理。这是你的选择，无论如何也无关紧要。我认为我的建议更容易维护，如果我要优化，本页的其他方面值得更多关注。

我还建议将来创建一个功能性的jsFiddle，使用一个功能实例可以更容易地测试和解决问题。我尝试创建一个，但我必须更加重视HTML和JavaScript，因为您提供的源代码中缺少JavaScript函数。

我希望有所帮助！请随意询问有关我的答案的任何问题，但请不要扩大原始问题的范围。

自动填充金额

1 个答案: