Jquery rotate visible links on click

Question

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!

http://jsfiddle.net/4dbWu/

$(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');
            });

Answer 1

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.

jsFiddle demo

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--;
});

Answer 2

This line is your problem:

$(this).attr('id','link3right');

When you click on the link id="link2right", you rename the ID of that link to id="link3right".

This action changes the DOM and the link3right link behaves as if it was injected into the DOM. Therefore, you must use event delegation to trap the click event for selector link3right.

So, change this:

$('#link3right').click(function(){

To this:

$(document).on('click', '#link3right', function(){

Try that, it will fix that particular problem.

jsFiddle