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