I'm trying to create a menu that rotates the clickable link with a right and left arrow. My issue is that after you select the first arrow, it disables itself and doesn't allow you to click it again and change the current visible link. Also, if you hit the 'previous' arrow on the left side, it doesn't remove the current link, but just adds the previous one next to it.
Please help!
$(document).ready(function(){
$('.link2Btn').hide();
$('.link3Btn').hide();
$('.link4Btn').hide();
});
/* This is the right side */
$('#link2right').click(function(){
if(!$('.link2Btn').is(':visible')) {
$('.link1Btn').fadeOut();
$('.link2Btn').delay(300).fadeIn();
$(this).attr('id','link3right');
$('#link4left').attr('id','link1left');
}
});
$('#link3right').click(function(){
if(!$('.link3Btn').is(':visible')) {
$('.link2Btn').fadeOut();
$('.link3Btn').delay(300).fadeIn();
$(this).attr('id','link4right');
$('#link1left').attr('id','link2left');
}
});
$('#link4right').click(function(){
$('.link3Btn').fadeOut();
$('.link4Btn').delay(300).fadeIn();
$(this).attr('id','link1right');
$('#link2left').attr('id','link3left');
});
/* This is the left side */
$('#link4left').click(function(){
$('.link1Btn').fadeOut();
$('.link4Btn').delay(300).fadeIn();
$(this).attr('id','link3left');
$('#link2right').attr('id','link1right');
});
$('#link3left').click(function(){
$('.link4Btn').fadeOut();
$('.link3Btn').delay(300).fadeIn();
$(this).attr('id','link2left');
$('#link1right').attr('id','link4right');
});
$('#link2left').click(function(){
$('.link3Btn').fadeOut();
$('.link2Btn').delay(300).fadeIn();
$(this).attr('id','link1left');
$('#link4right').attr('id','link3right');
});
This may be a better way to structure your javascript/jQuery code.
Below example uses the jQuery "begins with" selector to, first, select and hide all elements whose class name begins with "link" before displaying the desired selector. Less code.
Also, we use ternary syntax to say:
IF currLink
is 4, then make it 1; otherwise, increment it.
var currLink = 1;
$('.link2Btn').hide();
$('.link3Btn').hide();
$('.link4Btn').hide();
/* This is the right side */
$('#link2right').click(function(){
$('[class^=link]').fadeOut(); //use the "begins with" selector: ^=
if (currLink == 4) {
$('.link1Btn').fadeIn(500);
}else if (currLink == 3) {
$('.link4Btn').fadeIn(500);
}else if (currLink == 2) {
$('.link3Btn').fadeIn(500);
}else if (currLink == 1) {
$('.link2Btn').fadeIn(500);
}
(currLink==4)?currLink=1:currLink++;
});
$('#link4left').click(function(){
$('[class^=link]').fadeOut();
if (currLink == 4) {
$('.link3Btn').fadeIn(500);
}else if (currLink == 3) {
$('.link2Btn').fadeIn(500);
}else if (currLink == 2) {
$('.link1Btn').fadeIn(500);
}else if (currLink == 1) {
$('.link4Btn').fadeIn(500);
}
(currLink==1)?currLink=4:currLink--;
});