Onclick 显示下一个 div答案

【问题标题】：Onclick show next divsOnclick 显示下一个 div
【发布时间】：2012-06-23 04:17:56
【问题描述】：

我有 1000 个 div，其中 20 个是可见的，其余的是隐藏的。

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

【问题讨论】：

你试过什么？您如何将前二十个设置为首先可见？帮助我们帮助您。

标签： jquery

【解决方案1】：

如果您使用的是 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 解决方案，也许其他人可以在这方面提供帮助。

【讨论】：

谢谢斯瓦特金斯！这很有帮助
让我看看你的代码，我可以给你一个更具体的写法。

【解决方案2】：

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

【讨论】：

非常感谢 GrayFox，请解释如何将接下来的 20 个 div 分配给 css 类？
我已经更新了我的答案。在样式部分中，定义 50 个类 (50*20 = 1000)。在您的 1000 个 div 中按组逻辑添加类。
另外，如果您的 div 很接近，请将这些 div 包裹在 div 中，以便于管理。如果没有，css 类就是要走的路。
感谢您宝贵的时间，有没有 CSS 的纯 jquery 代码。
JavaScript、CSS 和 HTML 密不可分。您将如何轻松识别没有 CSS 的 div？您需要一个 ID 或一个类来表示哪些 div 被操纵，哪些被单独留下。这只是一点点 CSS（类定义是空的），振作起来！

【解决方案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 Fiddle 演示。

参考资料：

【讨论】：