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

Posted 2023-05-07

【中文标题】如何重新排列javascript循环中的数字？

【英文标题】：How do i rearrange the number in java script loop?

【发布时间】：2017-04-05 15:47:27

【问题描述】：

我已经根据用户输入的数字动态生成文本框。例如，用户在输入框中输入 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>

【参考方案1】：

您已经快到了，但是，通过对标签进行硬编码，您很难自己更新它们。我已经为您的问题创建了一个 jsfiddle 解决方案。我个人更喜欢缓存我的 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>

【讨论】：

哇，谢谢！，我知道付款期限，我如何设法将默认设置为第一次付款、第二次付款、第三次付款、第四次付款等等。我该怎么做？

@nonstop328，您的意思是，您如何设置付款条件的默认输入值？如果有人要删除第 3 项，您会希望它更新第 4 和第 5 项以更新到他们的新位置默认值，还是保持原来的第 4 和第 5 项默认值？

如果用户删除 3rd 将更新 4th 和 5th 成为 3rd 和 4th。有可能这样做吗？

这是我迄今为止所做的testing here 我错过了获得值 1 、 2 和 3 的内容？

@nonstop328，您在一些地方错过了双等号 (==)，因此将数字分配给 x 而不是比较它们。更新的小提琴包含您的序数（例如st、nd 等），以及默认值的分配，在删除代码集时可选覆盖

【参考方案2】：

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

希望这会很有帮助