javascript - 如何重新排列 javascript 循环中的数字？

Question

我已经根据用户输入的数字动态生成文本框。例如，用户在输入框中输入10，点击添加将生成10个输入框。我有一个标签来捕捉号码。

这是我的问题

• 如何从 1 开始？
• 当用户删除某个输入框时如何重新排列数字

这是我的 JavaScript

$(document).ready(function () {
$("#payment_term").change(function () {

    var count = $("#holder input").size();
    var requested = parseInt($("#payment_term").val(), 10);

    if (requested > count) {
        for (i = count; i < requested; i++) {                
            $("#payment_term_area").append('<div class="col-lg-12 product_wrapper">' +

                  '<div class="col-lg-12 form-group">' +
                  '<label>' + i + 'Payment</label>' +
                  '<input type="text" class="payment_term form-control" name="PaymentTerm[]"/>' +
                  '</div>' +

                  '<a href="#" class="remove_field btn btn-danger pull-right">cancel</a>' +

                  '</div>');
        }
        $("#payment_term_area").on("click", ".remove_field", function(e) {                  //user click on remove text
            e.preventDefault();
            $(this).parent('.product_wrapper').remove();              
            calculateTotal();
            x--;
        })
    }
});

});

这是我的观点

<input type="text" id="payment_term" />
<button onclick="function()">Add</button>
<div id="payment_term_area"></div>

Answer 1

您已经快到了，但是，通过对标签进行硬编码，您自己的更新变得很困难。我已经创建了一个 jsfiddle 来解决您的问题。我个人更喜欢缓存 jQuery 对象的值，这样它们每次被引用时就不会访问 DOM，从而提高性能(因此它们被列在顶部)。我还发现在 JS 中绑定(bind) click 事件比使用 html 属性 onclick 更好，但这只是一个偏好。

<强> JSFIDDLE

Javascript

// create cache of jQuery objects
var add_payment_terms_button = $('#add_payment_terms');
var payment_term_input = $('#payment_term');
var payment_term_area = $('#payment_term_area');
var default_payment_values = ['first value', 'second value', 'third value', 'forth value', 'fifth value'];
var default_other_value = 'default value';

// bind to generate button
add_payment_terms_button.on('click', generatePaymentTerms);

function generatePaymentTerms(){
    var requested = parseInt(payment_term_input.val(), 10);
    // start i at 1 so that our label text starts at 1
    for (i = 1; i <= requested; i++) {
        // use data-text to hold the appended text to the label index
        payment_term_area.append(
        '<div class="col-lg-12 product_wrapper">' +
            '<div class="col-lg-12 form-group">' +
                '<label data-text=" Payment"></label>' +
                '<input type="text" class="payment_term form-control" name="PaymentTerm[]"/>' +
            '</div>' +
            '<a href="#" class="remove_field btn btn-danger pull-right">cancel</a>' +
        '</div>');
    }
    // call the function to set the labels
    updateProductIndexes();
}

function updateProductIndexes(){
    // get all labels inside the payment_term_area
    var paymentLabels = payment_term_area.find('.product_wrapper label');
    for(var x = 0, len = paymentLabels.length; x < len; x++){
        // create jQuery object of labels
        var label = $(paymentLabels[x]);
        // set label text based upon found index + 1 and label data text
        label.text( getOrdinal(x + 1) + label.data('text'));

        // either set the next input's value to its corresponding default value (will override set values by the user)
        label.next('input.payment_term').val(default_payment_values[x] || default_other_value)

        // or optionally, if value is not equal to blank or a default value, do not override (will persist user values) 
        /* var nextInput = label.next('input.payment_term');
        var nextInputValue = nextInput.val();
        if(nextInputValue === '' || default_payment_values.indexOf(nextInputValue) >= 0 || nextInputValue === default_other_value){
            nextInput.val(default_payment_values[x] || default_other_value)
        } */
    }
}

// courtesy of https://gist.github.com/jlbruno/1535691
var getOrdinal = function(number) {
   var ordinals = ["th","st","nd","rd"],
       value = number % 100;
   return number + ( ordinals[(value-20) % 10] || ordinals[value] || ordinals[0] );
}

payment_term_area.on("click", ".remove_field", function(e) { //user click on remove text
    e.preventDefault();
    $(this).parent('.product_wrapper').remove();
    // after we remove an item, update the labels
    updateProductIndexes();
})

HTML

<input type="text" id="payment_term" />
<button id="add_payment_terms">Add</button>
<div id="payment_term_area"></div>