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クリック時に 1 つのリスト アイテムを追加し、前の関数のグローバル変数からテキストを設定します。クリックすると、変数で定義されているように、変数をxgenerate回追加したい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 に答える