隐藏一个可见的块并显示下一个块

Question

我正在尝试构建一个非常简单的旋转木马，其中只有一个开关在点击时隐藏一个可见的div并显示下一个。如果我简化它的旋转木马只能用一个触发器在一个方向上移动

以下是我如何接近这个

var lists = $('.listItem');
for(var i = 0; i < lists.length; i+=3) {
  lists.slice(i, i+3).wrapAll("<li class='new'><ul></ul></li>");
}

$('.toggleClass').click(function(){
    if($('.new').is(':visible')){
        //hide the one which is visible and show the next one
        //run this in a loop
    };
});

这里是小提琴

http://jsfiddle.net/sghoush1/6KS3a/2/

Answer 1

我想我解决了自己的问题

这样做了

$('.new').eq(0).addClass('current');
//$('.new').eq(10).addClass('last');

$('.toggleClass').click(function(){
    $('.current').removeClass('current').hide()
    .next().show().addClass('current');
});

这里是小提琴

http://jsfiddle.net/sghoush1/6KS3a/5/