1. 程式人生 > >點選“換一換”切換商品,使用jquery slice()實現無縫連線切換

點選“換一換”切換商品,使用jquery slice()實現無縫連線切換

頁面需求需要做一個點選換一換按鈕,切換商品資訊。網上看了一些笨方法,覺得太冗餘。自己寫了一個精簡版的如下:

html部分

        <div class="layer clearfix qiang_inner">
            <ul>
                <li> item111</li>
                <li> item111</li>
                <li> item111</li>
                <li> item111</li>
                <li> item111</li>
                <li> item111</li>
                <li> item111</li>
                <li> item111</li>
            </ul>
        </div>

JS部分

    // 點選換一換切換商品
    var changeindex=0;
    var linum=3; //每組多少資料
    var lisum=$(".qiang_inner li").length; //總數
    $(".switch").click(function(){
        $(".qiang_inner li").hide();
        $(".qiang_inner li").slice(changeindex, changeindex+linum).show();
        changeindex+=linum;
        console.log(changeindex);
        if(changeindex>=lisum)
        changeindex=0;
    });
    $(".switch").trigger('click');

將指定索引範圍內的 資料顯示出來 其他的隱藏。