根据用户输入生成列表项x次数 [英] Generating list item x number of times, based on user input

问题描述

我有一个基本的无序列表，其下面有一个输入字段/表单。我希望用户能够键入他们想要查看的列表项的总数，点击后，结果将显示。这是我的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 =fouraction =＃> 
< input type =textplaceholder =每页输入项目>< / input> 
< button>提交< / button> 
< / form> 
  

我的JQuery：

 $ $$$$$$$$$$ var boxes = $（＃box）; 
 var generate =< div class ='box1'>< / div>; 
 
 boxes.html ）; 
 box.append（generate）; 
 boxes.children（）。html（< p>+ text +< / p>）; 
}）; 
  

我正在从用户输入（项目数）存储变量，清除所有列表 #boxes 中的项目，然后在点击上附加一个列表项，从前一个功能的全局变量设置文本。点击后，我想要变量生成以追加 x 次数，如变量 buttonValsss

有什么最好的方法？

解决方案

尝试使用 循环：

  $（ ＃4 $$$$$$$（＃） ; 
 boxes.empty（）; //你可以使用$（$ {$ {$ { class =box1>< / div>'）; 
} 
}）; 
  

http://jsfiddle.net/z2Wc3/

I have a basic unordered list with an input field/form below it. I would like the user to be able to type in the total number of list items they would like to see and on click, the results would show. Here is my 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>

And my 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>");
});

I am storing the variable from the user input (number of items), clearing out all of the list items in #boxes, and then appending one list item on click, setting the text from a global variable from a previous function. On click, I want the variable generate to be appended x number of times, as defined by the variable buttonValsss

What is the best way to go about this?

解决方案

try using for loop:

$("#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/

这篇关于根据用户输入生成列表项x次数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！