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/

根据用户输入生成列表项x次

1 个答案: