天天看點

JQ-頁面的上一頁下一頁切換

思路:

通過 hide() 隐藏和 show() 顯示。

點選目前頁中的下一頁按鈕,先擷取這一頁的index索引。

擷取索引,除了下一頁所有頁面隐藏。

HTML:

<div class="items-top">
     <div class="top">
         <i class="iconfont icon-fanhui"></i>
         <i class="iconfont icon-gengduo"></i>
         <div class="inner" >
              <p>你好</p>
         </div>
    </div>
    <div class="top">
         <i class="iconfont icon-fanhui"></i>
         <i class="iconfont icon-gengduo"></i>
         <div class="inner" >
              <p>HELLO</p>
         </div>
    </div>
</div>
           

JQ:

var top = $(".top");
        top.hide();
        $(".items-top .top").eq(0).show();
        //下一 頁
        $(".icon-gengduo").click(function () {
            var num = $(this).parent().index() + ;
            top.hide();
            $(".items-top .top").eq(num).show();
            if (num == top.length) {
                $(".items-top .top").eq(0).show();
            }
        });

        //上一頁
        $(".icon-fanhui").click(function () {
            var num = $(this).parent().index() - ;
            top.hide();
            console.log(num);
            $(".items-top .top").eq(num).show();
        });