2013-02-12 50 views
0

我有一組div,我只想一次顯示4個。默認情況下,你會看到1,2,3,4當你點擊下一個你應該看到2,3,4,5,如果你點擊下一個你應該看到3,4,5,6,如果你點擊prev你應該看到1 ,2,3,4,如果您最初單擊prev,我希望不發生任何事情。當你到最後,我希望在下次點擊時不會發生任何事情。jQuery onclick show next隱藏第一個vissible div

目前,這是我有什麼,但它似乎是一個公平的路要走?(click here),

<div class="testwrap"> 
     <div class="testtitle"> 
      <h3>Test title 1</h3> 
     </div> 
    <span style="float:left" id="prev">prev</span> 

     <div class="testclass test1">1</div> 
     <div class="testclass test2">2</div> 
     <div class="testclass test3">3</div> 
     <div class="testclass test4">4</div> 
     <div class="testclass test5">5</div> 
     <div class="testclass test6">6</div> 
     <div class="testclass test7">7</div> 
     <div class="testclass test8">8</div> 
     <div class="testclass test9">9</div> 
     <div class="testclass test10">10</div> 
    <span style="float:right" id="next">next</span> 

    </div> 

    <script> 
    $('.testclass:gt(3)').hide(); 

    $('#prev').click(function() { 
     var first = $('.testwrap').children('.testclass:visible:first'); 
     first.prevAll('.testclass:lt(1)').show(); 
     first.prev().nextAll('.testclass').hide() 
    }); 

    $('#next').click(function() { 
     var last = $('.testwrap').children('.testclass:visible:last'); 
     last.nextAll('.testclass:lt(1)').show(); 
     last.next().prevAll('.testclass').hide(); 
    }); 
    </script> 

    <style> 
    .testwrap { 
     float: left; 
     background: orange; 
     width: 500px; 
    } 

    .testclass { 
     background: none repeat scroll 0 0 yellow; 
     border: 1px solid red; 
     float: left; 
     font-size: 28px; 
     height: 40px; 
     margin: 7px 3px; 
     overflow: hidden; 
     width: 100px; 
     text-align: center; 
    } 
    .testtitle { 
     float:left; 
     display:inline; 
     width: 100%; 
    } 
    </style> 
+0

爲什麼有prev按鈕,當你不想要發生什麼? – 2013-02-12 06:02:36

+0

只有第一次例如最初沒有prev,但是當你點擊下一個prev變得相關。你提到的 – ak85 2013-02-12 06:04:38

+0

,如果你有3,4,5,6,你點擊prev,它應該看1,2,3,4理想情況下它不會是2,3,4,5?這背後的基本原理是什麼? – 2013-02-12 06:06:09

回答

3

你的下一個click..get所有可見的第一...和顯示.testclass:lt(4)。 ,並在上一個點擊......讓所有可見從去年...和顯示.testclass:lt(4)

試試這個

$('.testclass:gt(3)').hide(); 

$('#prev').click(function() { 
    var first = $('.testwrap').children('.testclass:visible:last'); 
    if(first.prevAll('.testclass:lt(4)').length == 4){ //updated check if count of total displayed div is 4.. then sho() and hide() 
    first.prevAll('.testclass:lt(4)').show(); 
    first.prev().nextAll('.testclass').hide() 
    } 
}); 

$('#next').click(function() { 
    var last = $('.testwrap').children('.testclass:visible:first'); 
    if(last.nextAll('.testclass:lt(4)').length == 4){ //updated 
    last.nextAll('.testclass:lt(4)').show(); 
    last.next().prevAll('.testclass').hide(); 
    } 
}); 

fiddle here

我增加了一個<div>檢查邏輯..你可以試一下在..

更新fiddle

+0

是的,這工作表示感謝。是否有可能有4總是顯示?同時也禁用prev最初,如果你繼續點擊它,你失去了divs,無法讓他們回來? – ak85 2013-02-12 06:07:29

+0

我更新了我的答案...請檢查.. :) :) – bipen 2013-02-12 06:07:54

+0

沒有必要像'('.testclass:lt(4)')。length == 4','lt-selector'一樣檢查條件匹配在該函數中傳遞的元素('lt')。請參閱http://api.jquery.com/lt-selector/ – 2013-02-12 06:14:20

1

試試這個:

$('.testclass:gt(3)').hide(); 

$('#prev').click(function() { 
    var first = $('.testwrap').children('.testclass:visible:last'); 
    if(first.prevAll('.testclass:lt(4)').length==4) 
    { 
     first.prevAll('.testclass:lt(4)').show(); 
     first.prev().nextAll('.testclass').hide() 
    } 
}); 

$('#next').click(function() { 
    var last = $('.testwrap').children('.testclass:visible:first'); 
    if(last.nextAll('.testclass:lt(4)').length==4) 
    { 
     last.nextAll('.testclass:lt(4)').show(); 
     last.next().prevAll('.testclass').hide(); 
    } 
}); 

檢查小提琴http://jsfiddle.net/dRfb4/13/

+1

正確...但是OP說:'默認情況下,你會看到1,2,3,4,當你點擊下一個你應該看到2,3,4,5,如果你點擊下一步你應該看到3,4,5,6'.. in你的情況是'1,2,3,4'然後'5,6,7,8'等等..檢查這個我必須檢查長度... :) :) – bipen 2013-02-12 06:31:39

2

對於這樣的分頁,我會使用包含當前活動頁面和切片方法的變量來顯示r equested範圍:

var cP = 0 /* current page */, 
    vP = 4 /* how many page links should be visible */; 

$('.testclass:gt('+(vP-1)+')').hide(); 

$('#prev').click(function() { 
    if(cP > 0) { 
     cP--; 
     $('.testclass').hide(); 
     $('.testclass').slice(cP,cP+vP).show(); 
    } 
}); 

$('#next').click(function() { 
    if(cP < $('.testclass').length-vP) { 
     cP++; 
     $('.testclass').hide(); 
     $('.testclass').slice(cP,cP+vP).show(); 
    } 
}); 

你會找到一個fiddle這裏。

+0

這是最目前爲止可讀解決方案爲了使它更通用,將第一行放在var初始化之下並使gt(3)的值使用vP - 1. – 2013-02-12 06:48:02

+0

是否可以在此代碼段中添加旋轉效果?我的意思是用戶可以看到第一個圖標消失並顯示最後一個圖標? – Kiran 2016-05-11 10:15:28