Move across multiple divs with next and previous buttons
I've already found a solution for this, but I'm new to JQuery.
How do you change it so that I can show three divs at a time and when next or previous buttons are clicked it advances 1 instead of only showing one at a time.
Here is the JS script I was looking at:
http://jsfiddle.net/TrueBlueAussie/aVJBY/468/
and this is 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);
source to share
You can do it this way and it works great, but on the other hand I'm also sure there might be a more optimized way.
// 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');
}
});
Check it here: http://jsfiddle.net/aVJBY/551/
change is
added if(!$('#child'+First).is(':last-child'))
and
if(!$('#child'+Third).is(':first-child'))
so there is always at least the first or last div
visible
source to share
you can specify each div input id and use jquery buy click then you can get which input the active class has and get its id and then you can set the next class by adding +1 to the div name and -1 setfoces if you want to come back.
And don't forget to move the class name accordingly
You can use these jquery functions for this
var active_div = $( .active );
$( P_active_div_id ).removeClass( "active" );
$( N_active_div_id ).addClass( "active" );
$( "#target" ).focus();
I hope this helps
source to share
Try to use . 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/
source to share