5

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

示例场景：

在此处输入图像描述

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

在此处输入图像描述

  1. 我输入50第一个字段的金额，结果Payee: 1 [-950.50]为收款人的剩余金额。当我添加另一个字段时，它会自动填写金额，我希望-950.50这是剩余的金额。但我得到的是-1,000.50第二个字段中的初始金额。如何获取更新后的余额？

  2. 如果我删除添加的字段，我想添加回金额。例如。如果该字段具有50且剩余金额为-950.50. 如果我删除包含金额的字段， 50则必须将其添加回剩余金额中，它将是-1,000.50. 如何补回金额？

这是我尝试过的：

拆分.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>
4

1 回答 1

1

  1. 如何获取更新后的余额？您正在计算remain_amount准备好的文档，而不是单击添加按钮时。您需要在点击处理程序中移动它的计算#addScnt。只需将其作为该函数的第一行，它就会相应地重新计算。

  2. 如何补回金额？我们可以通过从要删除的输入字段中读取值来做到这一点。这是修改后的删除点击处理程序来演示。

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

我希望这会有所帮助！请随时就我的回答提出任何问题，但请不要扩大您原始问题的范围。

于 2013-04-15T17:31:57.127 回答