根据数字输入显示行

Question

我需要动态添加(克隆(/删除带有输入的div 取决于用户输入。如果用户将输入数字更改为 4 或 10，则必须显示div 4 或 10 次。

另外，我需要修改克隆div 中的输入名称(就像name_1一样(。

现在我尝试以这种方式执行此操作：

    var $row    = $('.row-with-fields');
    var $clone = $row.clone();
    $(".qty").on("keyup keydown change",function(event){
        $qty = $(this).val(); // how many rows I needs
        for(var i = 0; i < $qty; i++){
            $row.after($clone.addClass('row_'+i));
        }
    });

Answer 1

您应该考虑两种情况：

1-Clone(( 函数引用元素

2-您应该检查事件触发的次数(我只使用change事件(

var $row = $('.row-with-fields');   
$(".qty").on("change",function(event){
    $qty = $(this).val(); // how many rows I needs
    for(var i = 0; i < $qty; i++){
        var $clone = $('.row-with-fields:first').clone();
        $row.after($clone.addClass('row_'+i));
    }
});

Answer 2

最后我这样做了：

    var $row    = $('.rsvp-qty-fields');
    $(".tribe-ticket-quantity").on("keyup keydown change",function(event){
        $qty = $(this).val();
        $rowsExist = $('.rsvp-qty-fields').length;
        if ($rowsExist < $qty) {
            for(var i = $rowsExist; i < $qty; i++){
                var $clone = $('.rsvp-qty-fields:first').clone().removeClass('receiver');
                $clone.find('.receiver').remove()
                $row.after($clone.addClass('row_'+i));
            }
            console.log('add');
        } else if($rowsExist > $qty) {
            for(var i = $rowsExist; i > $qty; i--){
                if (!($rowsExist <= 1)) {
                 $('.rsvp-qty-fields-wraper').children('.rsvp-qty-fields').last().remove();
                } else {
                  console.log('stop remove');
                }
        }
          console.log('remove');
     } else {
          console.log('equal');
     }