Onclick显示下一个div [英] Onclick show next divs

问题描述

我有1000个div，其中20个可见，其余隐藏.

I have 1000 divs and 20 of them are visible and remaining are hidden.

在onClick jquery事件中，我希望接下来的20个div可见，依此类推.

In the onClick jquery event, I want the next 20 divs to become visible and so on.

推荐答案

我会建议类似于以下内容，尽管我强烈建议将其制作为函数或插件:

I'd suggest something akin to the following, though I'd strongly recommend making it into a function, or plugin:

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 Fiddle演示.

JS Fiddle demo.

参考文献:

• event.prevendDefault() .
• filter() .
• :first选择器.
• hide() .
• index() .
• :last选择器.
• slice() .
• show() .
• :visible选择器.

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

这篇关于Onclick显示下一个div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！