Question

我已经找到了解决方案，但我是JQuery的新手。

如何更改它以便我可以一次显示三个div，当单击下一个或上一个按钮时，它会前进1而不是一次只显示一个。

这是我正在看的JS小提琴：

http://jsfiddle.net/TrueBlueAussie/aVJBY/468/

这是JQuery：

   function updateItems(delta)
{
    var $items = $('#group').children();
    var $current = $items.filter('.current');
    $current = $current.length ? $current : $items.first();
    var index = $current.index() + delta;
    // Range check the new index
    index = (index < 0) ? 0 : ((index > $items.length) ? $items.length : index); 
    $current.removeClass('current');
$current = $items.eq(index).addClass('current');
// Hide/show the next/prev
$("#prev").toggle(!$current.is($items.first()));    
$("#next").toggle(!$current.is($items.last()));    
}
$("#next").click(function () {
updateItems(1);
});
$("#prev").click(function () {
updateItems(-1);
});
// Cause initial selection
updateItems(0);

Answer 1

你可以这样做，但效果很好，但另一方面我也确定可能会有一种更优化的方式。

// give each div an id "#child1", "#child2", etc.
$("#group div").each(function(i) {
    $(this).attr('id', "child" + (i + 1));
}); 

var First = 1;
var Second = 2;
var Third = 3;

$('#child'+First+', #child'+Second+', #child'+Third ).addClass('current');

// on next click, add +1 to First, Second and Third
$('#next').click(function(){
    if( !$('#child'+First).is(':last-child') ) {
        $("#group div").removeClass('current');
        First++;
        Second++;
        Third++;
        $('#child'+First+', #child'+Second+', #child'+Third ).addClass('current');
    }
});

$('#prev').click(function(){
    if( !$('#child'+Third).is(':first-child') ) {
        $("#group div").removeClass('current');
        First--;
        Second--;
        Third--;
        $('#child'+First+', #child'+Second+', #child'+Third ).addClass('current');
    }
});

在此处查看：http://jsfiddle.net/aVJBY/551/

修改添加了if(!$('#child'+First).is(':last-child'))和 if(!$('#child'+Third).is(':first-child'))这种方式总是至少有第一个或最后一个div可见

Answer 2

你可以给每个div输入id并使用jquery购买点击下一步你可以得到哪个输入有活动类并得到它的id然后你可以通过在div名称和-1 setfoces上添加+1来设置下一个输入想回去。

请记得相应地移动班级名称

您可以使用这些jquery函数来执行此操作

var active_div = $( .active );
$( P_active_div_id ).removeClass( "active" );
$( N_active_div_id ).addClass( "active" );
$( "#target" ).focus();

我希望这会有所帮助

Answer 3

尝试使用.slice()

var group = $("#group")
, items = group.children().eq(0).addClass("current").addBack()
, buttons = $("#next, #prev")
, prev = buttons.filter("#prev").hide(0)
, next = buttons.filter("#next");

buttons.on("click", function (e) {
    var button = $(this)
    , idx = function (index) {
        return items.filter(".current").eq(index).index()
    }
    , _toggle = function (start, stop) {
        $(".current").hide(0, function () {
            $(this).removeClass("current");
            items.slice(start, stop)
            .addClass("current").show(0);
            prev.toggle(start > 0);
            next.toggle(stop < items.length)
        })
    };
    if (button.is(next) && idx(-1) + 4 <= items.length) {
        _toggle(idx(-1) + 1, idx(-1) + 4)
    } else if (button.is(prev) && idx(0) !== 0) {
        _toggle(idx(0) === 1 ? 0 : idx(0) - 3, idx(0))
    };
});

#group div {
    display: none;
}
#group div.current {
    display: block;
    border: 1px solid red;
}
#next, #prev {
    width: 100px;
    height 40px;
    border: 1px solid blue;
}
#next {
    float: right;
}
#prev {
    float: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div id="group">
    <div>one</div>
    <div>two</div>
    <div>three</div>
    <div>four</div>
    <div>five</div>
    <div>six</div>
    <div>seven</div>
    <div>eight</div>
    <div>nine</div>
    <div>ten</div>
</div>
<div id="next">next</div>
<div id="prev">prev</div>

jsfiddle http://jsfiddle.net/q1quarfk/

使用下一个和上一个按钮浏览多个div

3 个答案: