jquery - オンクリックで次の div を表示

Question

1000 個の div があり、そのうち 20 個が表示され、残りは非表示になっています。

onClick jquery イベントでは、次の 20 個の div が表示されるようにします。

score 0 · Accepted Answer

20 個のセットを CSS クラスに割り当て、jQuery メソッドにそのクラスのすべてを表示させます。グローバル js 変数でクリック数を追跡し、if ステートメントの場合は、適切なセクションを非表示にします。

<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>

score 0 · Accepted Answer

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以外のソリューションはありません。おそらく他の誰かがその面で助けてくれるでしょう。

score 0 · Accepted Answer

関数またはプラグインにすることを強くお勧めしますが、次のようなものをお勧めします。

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 フィドルのデモ。

参考文献:

jquery - オンクリックで次の div を表示

3 に答える 3

Related

Reference