JQuery通过Onblur输入值动态追加文本

Question

当我给输入（1）时，它成功附加文本。但是，当我擦除然后输入值，并再次输入（2），然后增加与以前的值（1 + 2 = 3）。当循环计数以前和现在的价值

$(document).ready(function(){ 
    var i=0; 
    $("#flatcount").blur(function() { 
      var floor = (this).value; 
       for(i=1;i<=floor;i++) { 
        $('#row').append('<p>This is appended text</p><br>'); 
       } 
    }); 
}); 

Answer 1

你需要清空element.before追加像$('#row').empty()

$(document).ready(function() { 
 
    var i = 0; 
 
    $("#flatcount").blur(function() { 
 
    var floor = $(this).val(); 
 
    $('#row').empty() //empty 
 
    for (i = 1; i <= floor; i++) { 
 
     $('#row').append('<p>This is appended text</p><br>'); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="number" id="flatcount"> 
 
<p id="row"></p>

Answer 2

使用此代码，我认为它会工作

$(document).ready(function(){ 
    var i=0; 
    $("#flatcount").blur(function() { 
       $("#row").empty(); 
       var floor = (this).value; 
       for(i=1;i<=floor;i++) { 
        $('#row').append('<p>This is appended text</p><br>'); 
       } 
    }); 
});