Onclick show next divs

Question

У меня есть 1000 div и 20 из них видны и остаются скрытыми.

В событии jQuery onClick я хочу, чтобы следующие 20 divs стали видимыми и так далее.

Answer 1

Назначьте классы от 20 до css, и ваш метод jQuery покажет все в этом классе. Вы можете иметь глобальную переменную JS номер трека кликов, а затем, если, если заявление, показать скрыть соответствующие разделы:

<script type="text/javascript">var numberOfClicks = 0;</script> 
<style>.IncurredDate1 {} .IncurredDate2 ... {}</style> 
<div class="incurredRow1">blah</div> 
<div class="incurredRow2">blah</div> 
//in click event 
<script type="text/javascript"> 
function buttonClick(event){ 
    switch(numberOfClicks) 
    { 
     case 1: 
     ... 
     case 20; 
      $(".incurredRow1").show(); 
      break; 
     case 21: 
     ... 
     case 40: 
      $(".incurredRow2").show(); 
      break; 
     default: 
      code to be executed if n is different from case 1 and 2 
    } 
    }();  
</script> 

Answer 2

Если вы используете JQuery, вы можете использовать метод .slice().

http://api.jquery.com/slice/

Что-то вроде:

$('button').click(function(e){ 
    var divs = $('.mydivs'); 
    divs.hide().slice(0, 20).show(); // 0 is the starting index 
}); 

Вы бы просто нужно выяснить логику, чтобы определить, что ваш исходный индекс.

У меня нет решения без jquery, возможно, кто-то другой мог бы помочь на этом фронте.

Answer 3

Я хотел бы предложить что-то похожее на следующее, хотя я настоятельно рекомендую сделать это в функцию или плагин:

var perSlice = 20; // how many to show on each 'page' 

// hides all but the first 'page' of the matched elements 
$('#wrap > div').hide().slice(0, perSlice).show(); 

$('a').click(
    function(e) { 
      // reference to the elements being 'paged' 
     var divs = $('#wrap div'), 
      // the first of the visible 'paged' elements 
      firstVisible = divs.filter(':visible:first'), 
      // the index of the first visible 'paged' elements 
      firstVisibleIndex = firstVisible.index('#wrap div'), 
      lastVisible = divs.filter(':visible:last'), 
      lastVisibleIndex = lastVisible.index('#wrap div'), 
      // the index of the first of the 'paged' elements 
      firstIndex = divs.filter(':first').index('#wrap div'), 
      lastIndex = divs.filter(':last').index('#wrap div'); 

     // if you've clicked the a element with id="prev" 
     if (this.id == 'prev') { 
      // prevents the default action of the link 
      e.preventDefault(); 
      // if the index of the first visible element is the same as the 
      // index of the first element 
      if (firstVisibleIndex == firstIndex) { 
       // don't do anything, and exit 
       return false; 
      } 
      else { 
       // otherwise, hide all the paged elements 
       divs.hide(); 
       // and then take a selection of those paged elements, and show them 
       divs.slice((firstVisibleIndex) - perSlice, firstVisibleIndex).show(); 
      } 
     } 
     else if (this.id == 'next') { 
      e.preventDefault(); 
      if (lastVisibleIndex == lastIndex) { 
       return false; 
      } 
      else { 
       divs.hide(); 
       divs.slice((lastVisibleIndex + 1), (lastVisibleIndex + 1) + perSlice).show(); 
      } 
     } 
    });​ 

JS скрипку демо.

Ссылки:

• event.prevendDefault().
• filter().
• :first selector.
• hide().
• index().
• :last selector.
• slice().
• show().
• :visible selector.