點選“換一換”切換商品,使用jquery slice()實現無縫連線切換
阿新 • • 發佈:2019-01-04
頁面需求需要做一個點選換一換按鈕,切換商品資訊。網上看了一些笨方法,覺得太冗餘。自己寫了一個精簡版的如下:
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');
將指定索引範圍內的 資料顯示出來 其他的隱藏。