These functions are selected by the same index. I understand the index logic of what to do but I don't know how to do it well enough.
// those are buttons that will trigger different functions according by an index
button_up = jQuery('#videos_tabs-up-0' );
button_down = jQuery('#videos_tabs-down-0' );
button_up_1 = jQuery('#videos_tabs-up-1' );
button_down_1 = jQuery('#videos_tabs-down-1' );
button_up_2 = jQuery('#videos_tabs-up-2' );
button_down_2 = jQuery('#videos_tabs-down-2' );
// this one stores a custom number
videos_visible = 3;
// there are 3 .ov_front_video div, see I select each one by its index
videos_list = jQuery('#ov_front_videos .ov_front_video:eq(0) .item-list ul');
videos_list_item = videos_list.find('li');
videos_list_item_length = videos_list_item.length;
videos_visible_limit = videos_list_item_length - videos_visible;
videos_list_1 = jQuery('#ov_front_videos .ov_front_video:eq(1) .item-list ul');
videos_list_item_1 = videos_list_1.find('li');
videos_list_item_length_1 = videos_list_item_1.length;
videos_visible_limit_1 = videos_list_item_length_1 - videos_visible;
videos_list_2 = jQuery('#ov_front_videos .ov_front_video:eq(2) .item-list ul');
videos_list_item_2 = videos_list_2.find('li');
videos_list_item_length_2 = videos_list_item_2.length;
videos_visible_limit_2 = videos_list_item_length_2 - videos_visible;
// each .ov_front_video (videos_list, videos_list_1, videos_list_2) animates pressing any of the previous buttons,
// I'm setting a variable for each .ov_front_video.index
k =1;
k_1 =1;
k_2 =1;
// The next functions animates videos_list when button_up is pressed,
// videos_list_1 when button_up_1 is pressed, etc ...
/* --------------------
click tab 0
------------------------ */
button_up.click(function() {
current_position = videos_list.position().top;
current_position = current_position + 70
videos_list.not(':animated').stop().animate({'top':current_position}, function() {k -= 1;});
console.log(k);
if (k == 2 ) {
jQuery('#videos_tabs-up-0').hide();
}
jQuery('#videos_tabs-down-0').show();
});
button_down.click(function() {
current_position = videos_list.position().top;
current_position = current_position - 70
videos_list.not(':animated').stop().animate({'top':current_position}, function() {k += 1;});
console.log(k);
if (k == videos_visible_limit ) {
jQuery('#videos_tabs-down-0').hide();
}
jQuery('#videos_tabs-up-0').show();
});
/* --------------------
click tab 1
------------------------ */
button_up_1.click(function() {
current_position = videos_list_1.position().top;
current_position = current_position + 70
videos_list_1.not(':animated').stop().animate({'top':current_position}, function() {k_1 -= 1;});
console.log(k_1);
if (k_1 == 2 ) {
jQuery('#videos_tabs-up-1').hide();
}
jQuery('#videos_tabs-down-1').show();
});
button_down_1.click(function() {
current_position = videos_list_1.position().top;
current_position = current_position - 70
videos_list_1.not(':animated').stop().animate({'top':current_position}, function() {k_1 += 1;});
console.log(k_1);
if (k_1 == videos_visible_limit_1 ) {
jQuery('#videos_tabs-down-1').hide();
}
jQuery('#videos_tabs-up-1').show();
});
/* --------------------
click tab 2
------------------------ */
button_up_2.click(function() {
current_position = videos_list_2.position().top;
current_position = current_position + 70
videos_list_2.not(':animated').stop().animate({'top':current_position}, function() {k_2 -= 1;});
console.log(k_2);
if (k_2 == 2 ) {
jQuery('#videos_tabs-up-2').hide();
}
jQuery('#videos_tabs-down-2').show();
});
button_down_2.click(function() {
current_position = videos_list_2.position().top;
current_position = current_position - 70
videos_list_2.not(':animated').stop().animate({'top':current_position}, function() {k_2 += 1;});
console.log(k_2);
if (k_2 == videos_visible_limit_2 ) {
jQuery('#videos_tabs-down-2').hide();
}
jQuery('#videos_tabs-up-2').show();
});