jquery - jqueryによるページネーション

Question

jQueryでページネーションを作成しようとしましたが、ここでは機能しないforループのページ番号です:

HTML

<div id="inf"></div>
<div id="pageNrs"></div>
...

JavaScript

var pNr = 1;
function cVal(nr) {
    pNr = nr;
    $('#inf').html(pNr);
}


 $(document).ready(function () {
        var data = getData();
        n = data.length;
        var pnr = 1;
        var pnrs = Math.ceil(n / 8.0);
        $('#pageNrs').append('<span id="fst">&lt;&lt;</span> | ');
        $('#fst').click(function () {
            cVal(1); 
        });
        $('#pageNrs').append('<span id="prv">&lt;</span> | ');
        $('#prv').click(function () {
            cVal(pNr < 2 ? 1 : pNr - 1);
        });
        for (var i = 1; i <= pnrs; i++) {
        //problem is exactly here...
            $('#pageNrs').append('<span id="pnr_' + i + '">' + i + '</span> | ');
            $('#pnr_' + i).click(function () { alert(('#pnr_' + i)); });
        }

        $('#pageNrs').append('<span id="nxt">&gt;</span> | ');
        $('#nxt').click(function () { 
            cVal(pNr >= pnrs ? pnrs : pNr + 1); 
        });
        $('#pageNrs').append('<span id="lst">&gt;&gt;</span>');
        $('#lst').click(function () { 
            cVal(pnrs);
        });
    });

これを達成する方法は、クリックするpange nr 7と警告が表示さ#pnr_7れ、クリックするnr 3と警告が表示され#pnr_3ます。

Answer 1

これを試すことができます：

    function doSomething(page) {
        alert(page);
    }


    $('#pageNrs').append('<span id="pnr_' + i + '" onclick="doSomething(' + i + ');">' + i + '</span> | ');