1

我有一个基本的无序列表，下面有一个输入字段/表单。我希望用户能够输入他们想要查看的列表项的总数，然后单击，结果会显示出来。这是我的 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

解决此问题的最佳方法是什么？

4

1 回答 1

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/

于 2012-07-01T23:35:10.033 回答