Jquery вращать видимые ссылки по клику

Question

Jquery вращать видимые ссылки по клику

0

Я пытаюсь создать меню, которое вращает кликабельную ссылку с помощью стрелки вправо и влево. Моя проблема в том, что после того, как вы выберете первую стрелку, она отключит себя и не позволит вам снова щелкнуть ее и изменить текущую видимую ссылку. Кроме того, если вы нажмете "предыдущую" стрелку слева, она не удалит текущую ссылку, а добавит предыдущую рядом с ней.

Пожалуйста помоги!

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

Xero1 02 дек. 2013, в 20:12

Источник

Теги:

jquery

hyperlink

visible

2 ответа

0

Эта строка является вашей проблемой:

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

Когда вы нажимаете на ссылку id="link2right", вы переименовываете идентификатор этой ссылки в id="link3right".

Это действие изменяет DOM, и ссылка link3right ведет себя так, как если бы она была введена в DOM. Поэтому вы должны использовать делегирование делегирования для захвата события click для selector link3right.

Итак, измените это:

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

К этому:

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

Попробуйте это, это исправит эту конкретную проблему.

jsFiddle

gibberish 02 дек. 2013, в 15:32

0

Должен ли я переписать все ссылки 'linkXright' на ваш формат, чтобы правильно прокрутить список?
Xero1 02 дек. 2013, в 18:32
0

Это сработало! Большое спасибо.
Xero1 02 дек. 2013, в 18:35

Ещё вопросы

Должен ли я переписать все ссылки 'linkXright' на ваш формат, чтобы правильно прокрутить список?

gibberish · Accepted Answer · 2013-12-02T17-25-00.000Z

Это может быть лучший способ структурировать код javascript/jQuery.

Ниже пример использует селектор jQuery "начинается с", чтобы, во-первых, выбрать и скрыть все элементы, имя класса которых начинается с "ссылки" перед отображением нужного селектора. Меньше кода.

Кроме того, мы используем трехмерный синтаксис, чтобы сказать:

IF currLink равен 4, а затем 1; в противном случае увеличьте его.

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