0

假设我有一个名称数组：

var myarray = ["A", "B", "C", "D", ... "J"]

假设我的数组中有 10 个条目，并且我只想在任何给定时间显示 3 个。如何使每个条目（如果显示）以红色 div 显示，并带有“后退”链接和“下一个”链接？当我单击下一步时，它将显示下一个 3；当我单击上一个时，它将显示前 3 个。

例子：

最初显示 3 个 div

"A"  "B"  "C"

点击“下一步”显示

"D" "E" "F"

点击“上一个”节目

"A" "B" "C"

单击“下一步”3 次仅显示 1 个 div“J”

如何使用 Javascript 或 jQuery 来解决这个问题？任何样品表示赞赏。

4

5 回答 5

1

只是很快就掀起了一些东西。我认为对此有更好的模式......但它应该适用于任何充满任何东西的数组。

这有“下一个”和“上一个”按钮：http: //jsfiddle.net/aEYSB/

(function(){
    var index = 0,
        increment = 3,
        container = $( '#container' ),
        arr = [ 0,1,2,3,4,5,6,7,8,9,10,11,12 ],
        len = arr.length,
        limit = len - 1,

    renderMarkup = function(){
      var markup = [
        '<p>' + arr[index] + '</p>' 
      ];
      container.append( markup.join( '' ) );        
    };

    $( '#next' ).click( function(){
      container.empty();
      for( var i = 0; i < increment; i++ ){
        renderMarkup();
        if( index === limit ){ break; }
        index++;
      }
    });

    $( '#prev' ).click( function(){
      container.empty();
      for( var i = 0; i < increment; i++ ){
        renderMarkup();
        if( index === 0 ){ break; }
        index--;
      }
      var p = $( 'p' ).get().reverse();
      container.empty().append( p );
    });
})();​

这将形成一个连续的轮播：http: //jsfiddle.net/fSNhK/

(function(){
    var index = 0,
        increment = 3,
        container = $( '#container' ),
        arr = [ 0,1,2,3,4,5,6,7,8,9,10,11,12,13 ],
        len = arr.length,
        limit = len - 1,

    renderMarkup = function(){
      var markup = [
        '<p>' + arr[index] + '</p>' 
      ];
      container.append( markup.join( '' ) );        
    },

    controlIndex = function(){
      ( index === limit ) ? index = 0 : index++;
    };

    $( '#toggle' ).click( function(){
      container.empty();
      for( var i = 0; i < increment; i++ ){
        renderMarkup();
        controlIndex();
      }
    });
})();​
于 2012-09-07T04:39:01.107 回答
0

尝试这个

HTML

<div class="main">
    <input type="submit" value="next" id="next">
    <input type="submit" value="prev" id="prev">
    <div class="show"></div>
</div>

JS代码

$(document).ready(function(){
    var arr = ['a', 'b', 'c', 'd','e','f'];
    var goindex = [];
    var len=0;
    $('#next').on('click', function(){
        var next= [];
        for(var i=len; i<len+3; i++){
          next[i] = arr[i];
            goindex[i]=i;
        }
        len += 3;
        console.log(len);
        $('.show').text(next);

    });

    $('#prev').on('click', function(){
        var prev = [];
        console.log(len);
        var newlen=0;
        if(newlen>=0){
            for(var i=len-1; i>=newlen; i--){
              prev[i] = arr[i];
            }
        }
        newlen=len-3;
        len-=3;
        $('.show').text(prev);
    });
});

JS 小提琴链接

于 2012-09-07T06:31:04.063 回答
0 
Set start = 0;

Loop from start to start + 3;

Change start to start+3 , and loop again
于 2012-09-07T04:19:05.193 回答
0

从这里尝试一个：http ://www.jquery4u.com/plugins/10-jquery-pagination-plugins/#.UElwFo0geSo 或者寻找 jQuery 分页

于 2012-09-07T03:56:44.410 回答
0

这是一种解决方案 - http://jsfiddle.net/joplomacedo/3edpw/ - 按照您的建议工作。

var prev = document.getElementById('previous'),
    next = document.getElementById('next'),
    log  = document.getElementById('log'),
    array  = [0,2,3,9,32,2,5,8,9, 79],
    count = 0,

    updateLog = (function () {
        var x,
            amount_to_show = 3;

        return function () {
            x = count * amount_to_show;
            log.innerText = array.slice(x, x+amount_to_show).join(', ');
        };
    })(),

    nextClick = (function () {
        var x = Math.ceil(array.length / 3 - 1);

        return function () {
            if ( count != x ) {
                ++count ;
                updateLog();
            }
        };
    })(),

    previousClick = function () {
        if ( count != 0 ) {
            --count;
            updateLog();
        }
    };


prev.onclick = previousClick;
next.onclick = nextClick;

updateLog();
于 2012-09-07T04:56:26.567 回答