Question

我正在尝试使用左右箭头创建一个旋转可点击链接的菜单。我的问题是，在您选择第一个箭头后，它会自行禁用，并且不允许您再次单击它并更改当前的可见链接。此外，如果您点击左侧的“上一个”箭头，它不会删除当前链接，只会添加前一个链接。

请帮忙！

$(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).attr('id','link3right');

点击链接id="link2right"后，您将该链接的ID重命名为id="link3right"。

此操作会更改DOM，link3right链接的行为就像注入到DOM一样。因此，您必须使用事件委派来捕获选择器link3right的单击事件。

所以，改变一下：

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

对此：

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

尝试一下，它将解决这个特定问题。

jsFiddle

Answer 2

这可能是构建javascript / jQuery代码的更好方法。

下面的示例使用jQuery“begin with”选择器，首先，在显示所需的选择器之前，选择并隐藏其类名以“link”开头的所有元素。更少的代码。

另外，我们使用三元语法来说：

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

Jquery在点击时旋转可见链接

2 个答案: