Question

我正在尝试创建一个简单的分页，但是我不明白我在做什么错。 HTML：

<nav aria-label="Page navigation example">
        <ul class="pagination">
            <li class="page-item">
                <a class="page-link" href="#" aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                    <span class="sr-only">Previous</span>
                </a>
            </li>
        </ul>
    </nav>

Script.js：

var numberOfItems = $("#loop .list-group").length;
var limitPerPage = 4;

$("#loop .list-group:gt(" + (limitPerPage - 1) + ")").hide();
var totalPages = Math.round(numberOfItems / limitPerPage);
$(".pagination").append("<li class='page-item active'><a class='page-link' href='#'>" + 1 + "</a></li>");

for(var i = 2; i <= totalPages; i++){
    $(".pagination").append("<li class='page-item'><a class='page-link' href='#'>" + i + "</a></li>");
}

$(".pagination").append("<li id='next-page'><a class='page-link' href='#' aria-label='Next'><span aria-hidden='true'>&raquo;</span>    <span class='sr-only'>Next</span></a></li>");


$(".pagination li.page-item").on("click",function(){
    if($(this).hasClass("active")){
        return false;
    }else{
        var currentPage = $(this).index();
        $(".pagination li").removeClass("active");
        $(this).addClass("active");
        $("#loop .list-group").hide();

        var grandTotal = limitPerPage * currentPage;

        for(var i = grandTotal - limitPerPage; i < grandTotal; i++){
            $("#loop .list-group:eq(" + i + ")").show();
        }
    }

});

$("#next-page").on("click", function(){
    var currentPage = $(".pagination li.active").index();

    if(currentPage === totalPages){
        return false;
    }else{
        currentPage++;
        $(".pagination li").removeClass("active");
        $("#loop .list-group").hide();

        var grandTotal = limitPerPage * currentPage;

        for(var i = grandTotal - limitPerPage; i < grandTotal; i++){
            $("#loop .list-group:eq(" + i + ")").show();
        }
        $(".pagination li.page-item:eq(" + (currentPage-1) + ")").addClass("active");
    }



});

我的问题是$（“＃next-page”）函数无法正常工作：( 每当我单击下一步按钮时，它看起来就像$（“。pagination li”）。removeClass（“ active”）;一样。什么都不做，但是如果我在控制台中编写，它就可以工作：(而且我不明白为什么要这么做？

Answer 1

用一个变量保持寻呼机索引值（在我的代码中，它被命名为currentPage）。以一种价值工作更安全，更容易。

var numberOfItems = $("#loop .list-group").length;
var limitPerPage = 4;

$("#loop .list-group:gt(" + (limitPerPage - 1) + ")").hide();
var totalPages = Math.round(numberOfItems / limitPerPage);
$(".pagination").append("<li class='page-item active'><a class='page-link' href='#'>" + 1 + "</a></li>");

for(var i = 2; i <= totalPages; i++){
    $(".pagination").append("<li class='page-item'><a class='page-link' href='#'>" + i + "</a></li>");
}

$(".pagination").append("<li id='next-page'><a class='page-link' href='#' aria-label='Next'><span aria-hidden='true'>&raquo;</span>    <span class='sr-only'>Next</span></a></li>");


$(".pagination li.page-item").on("click",function(){
    if($(this).hasClass("active")){
        return false;
    }else{
        var currentPage = $(this).index();
        $(".pagination li").removeClass("active");
        $(this).addClass("active");
        $("#loop .list-group").hide();

        var grandTotal = limitPerPage * currentPage;

        for(var i = grandTotal - limitPerPage; i < grandTotal; i++){
            $("#loop .list-group:eq(" + i + ")").show();
        }
    }

});
$("#next-page a").on("click", function(e){
e.preventDefault();

});
 var currentPage=0;
$("#next-page").on("click", function(){
     
   
    if(currentPage >= totalPages-1){
        return false;
    }else{
    currentPage+=1;
         $(".pagination li").removeClass("active");
        $("#loop .list-group").hide();
  $(".pagination li").eq(currentPage+1).addClass("active");
        var grandTotal = limitPerPage * currentPage;

        for(var i = grandTotal; i < grandTotal+limitPerPage; i++){
            $("#loop .list-group:eq(" + i + ")").show();
        }
        
    }



});

.active {
 color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="loop">
<div class="list-group">1
</div>
<div class="list-group">2
</div>
<div class="list-group">3
</div>
<div class="list-group">4
</div>
<div class="list-group">5
</div>
<div class="list-group">6
</div>
<div class="list-group">7
</div>
<div class="list-group">8
</div>
<div class="list-group">9
</div>
<div class="list-group">10
</div>
</div>
<nav aria-label="Page navigation example">
        <ul class="pagination">
            <li class="page-item">
                <a class="page-link" href="#" aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                    <span class="sr-only">Previous</span>
                </a>
            </li>
        </ul>
    </nav>

分页jQuery问题

1 个答案: