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 - 您应该检查事件触发次数（我只使用Hex事件）

change

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

     }

根据输入的数字显示行

2 个答案: