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

然而，你几乎就在那里，通过对标签进行硬编码，你正在为自己更新它们。我已经为你的问题创建了一个解决方案。我个人更喜欢缓存我的jQuery对象的值，以便它们在每次引用时都不会访问DOM，以提高性能（因此它们列在顶部）。我也发现在JS中绑定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>

Answer 2

首先，你需要为每个标签标签提供id：<label id='i'> 然后，您可以使用document.getElementById('i')重新排列号码请参阅Change label text using Javascript

希望这会有所帮助

如何在java脚本循环中重新排列数字？

2 个答案: