0

左と右のキーを使用して、php でページ分割されたリストを水平方向に移動しようとしています。右のキーを押した後、Jquery は 2 番の 1 つの数字でスタックしているようです。どうもありがとうございました。

     $(document).ready(function(){
                function loading_show(){
                    $('#loading').html("<img src='images/loading.gif'/>").fadeIn('fast');
                }
                function loading_hide(){
                    $('#loading').fadeOut('fast');
                }                
                function loadData(page){
                    loading_show();
                    $.ajax
                    ({
                        type: "POST",
                        url: "load_data.php",
                        data: "page="+page, 
                        success: function(msg)
                        {
                            $("#container").ajaxComplete(function(event, request, settings)
                            {
                                loading_hide();
                                $("#container").html(msg);
                            });
                        }
                    });
                }
                loadData(1);  // For first time page load default results
                $('#container .pagination li.active').live('click',function(){
                    var page = $(this).attr('p');
                    loadData(page);

                });           
                $('#go_btn').live('click',function(){
                    var page = parseInt($('.goto').val());
                    var no_of_pages = parseInt($('.total').attr('a'));
                    if(page != 0 && page <= no_of_pages){
                        loadData(page);
                    }else{
                        alert('Enter a PAGE between 1 and '+no_of_pages);
                        $('.goto').val("").focus();
                        return false;
                    }

                });

$(document).keydown(function(e){
    if (e.keyCode == 39) {
        //do while( ){

        var page = $('#container .pagination li.active').attr('p');
        var add= 1
        var key = parseInt(page) + parseInt(add);
        //document.write(key);
                    loadData(key);
                    var page = key
        //}

       return false;
    }
});
            });
4

2 に答える 2

1 
$(function() {
    $(document).on('keyup', function() {
        var KEY_LEFT = 37;
        var KEY_RIGHT = 39;

        var currentPage = $('#container .pagination li.active');

        switch (e.keyCode) {
            case KEY_LEFT:
                var page = currentPage.removeClass('active')
                                        .prev()
                                        .addClass('active')
                                        .attr('data-page');

                loadData(page);
                break;

            case KEY_RIGHT:
                var page = currentPage.removeClass('active')
                                        .next()
                                        .addClass('active')
                                        .attr('data-page');

                loadData(page);
                break;
        }
    });
});

HTML：

<ul class="pagination">
    <li data-page="3">3</li>
    <li data-page="4">4</li>
    <li class="active" data-page="5">5</li>
    <li data-page="6">6</li>
    <li data-page="7">7</li>
</ul>
于 2012-08-09T05:48:04.877 に答える
1

まず、ここにセミコロンがありません：var add= 1そしてここ：var page = key。第二に、完全なHTMLコードがなければ、ここの誰も正確な問題を明確に特定することはできません。この問題にはAJAX応答が含まれており、質問で確認する応答の例はありません。

とにかく、2番目のページでスタックしている場合はp、要素の属性はli.active増加していません。ページが読み込まれるたびに1に設定されます。HTMLの提供を担当するサーバー側のプロセスが、期待するHTMLを返していません。console.logまたはアラートを使用して、HTMLのコンテンツを確認してみてください。

メソッドの内部.ajaxComplete：

alert(msg);

p属性が常に1に設定されていることがわかります。

于 2012-08-09T05:49:42.340 に答える