根據用戶輸入生成列表項x次數

Question

我有一個基本的無序列表，其下方有一個輸入字段/表單。我希望用戶能夠輸入他們希望看到的列表項的總數，然後點擊結果顯示。這是我的HTML：

<div id="boxes"> 
    <div class="box1"></div> 
    <div class="box1"></div> 
    <div class="box1"></div> 
    <div class="box1"></div> 
    <div class="box1"></div> 
</div> 

<form id="four" action="#"> 
    <input type="text" placeholder="Type items per page"></input> 
    <button>Submit</button> 
</form> 

而且我的JQuery：

$("#four button").on('click', function(){ 
    var buttonValsss = $("#four input").val(); 
    var boxes = $("#boxes"); 
    var generate = "<div class='box1'></div>"; 

    boxes.html(''); 
    boxes.append(generate); 
    boxes.children().html("<p>" + text + "</p>"); 
}); 

我存儲從用戶輸入的變量（項數），清理掉所有的列表項的#boxes，然後在單擊時追加一個列表項，從前一個函數的全局變量中設置文本。點擊後，我希望變量generate要追加X的次數，通過可變buttonValsss

什麼是去了解這一點的最好方式界定？

Answer 1

嘗試使用for循環：

$("#4 button").on('click', function(){ 
    var buttonValsss = $("#4 input").val(); 
    var boxes = $("#boxes"); 
    boxes.empty(); // you can use empty() method  
    for (i = 0; i < buttonValsss; i++) { 
     boxes.append('<div class="box1"></div>'); 
    } 
}); 

http://jsfiddle.net/z2Wc3/