根據輸入的數字顯示一個行

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

最後我它是這樣的：

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'); 

    } 

Answer 2

您應該考慮兩種情況：

1克隆（）函數是參考要素

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)); 
    } 

});