具有下一个和上一个jQuery的自定义模式

我在使用jQuery实现这个下一个和上一个按钮时遇到了困难。我正在实现我自己的个性化模式或弹出窗口。事情是这样的

CSS:

HTML:

如何在jQuery中实现它当我单击next按钮时，它会转到next

div

并关闭当前按钮，与单击previous按钮相同。非常感谢您的回答。谢谢：）

试试这个，然后

---

以下两个事件将适用于您的

next

和

previous

按钮

$('.next').on('click',function(){

    $('.grid-a1').find('.panel-a1').removeClass('opac');
    $('.grid-a1').find('.panel-a2').removeClass('in');
    $('.overlay-panel').fadeOut();
    if($(this).parents().closest('.grid-a1').nextAll().length!=0)
    {
        $(this).parents().closest('.grid-a1').next('.grid-a1').find('.panel-a1').addClass('opac');
        $(this).parents().closest('.grid-a1').next('.grid-a1').find('.panel-a2').addClass('in');
        $(this).parents().closest('.grid-a1').next('.grid-a1').find('.overlay-panel').fadeIn();
    }
});

$('.previous').on('click',function(){
    $('.grid-a1').find('.panel-a1').removeClass('opac');
    $('.grid-a1').find('.panel-a2').removeClass('in');
    $('.overlay-panel').fadeOut();
    if($(this).parents().closest('.grid-a1').prevAll().length!=0)
    {
        $(this).parents().closest('.grid-a1').prev('.grid-a1').find('.panel-a1').addClass('opac');
        $(this).parents().closest('.grid-a1').prev('.grid-a1').find('.panel-a2').addClass('in');
        $(this).parents().closest('.grid-a1').prev('.grid-a1').find('.overlay-panel').fadeIn();
    }
});

$('.next:last').addClass('last').hide();
$('.previous:first').addClass('first').hide();

$('.next').on('click',function(){

    $('.grid-a1').find('.panel-a1').removeClass('opac');
    $('.grid-a1').find('.panel-a2').removeClass('in');
    $('.overlay-panel').fadeOut();
    if($(this).parents().closest('.grid-a1').nextAll().length!=0)
    {
        var showingElem=$(this).parents().closest('.grid-a1').next('.grid-a1');
        showingElem.find('.panel-a1').addClass('opac');

        showingElem.find('.panel-a2').addClass('in');
        showingElem.find('.overlay-panel').fadeIn();
        if(showingElem.find('.next').hasClass('last'))
            $(showingElem.find('.next').hide());
        else
            $(showingElem.find('.next').show());
    }

});

$('.previous').on('click',function(){

    $('.grid-a1').find('.panel-a1').removeClass('opac');
    $('.grid-a1').find('.panel-a2').removeClass('in');
    $('.overlay-panel').fadeOut();
    if($(this).parents().closest('.grid-a1').prevAll().length!=0)
    {
        var showingElem=$(this).parents().closest('.grid-a1').prev('.grid-a1');
        showingElem.find('.panel-a1').addClass('opac');
        showingElem.find('.panel-a2').addClass('in');
        showingElem.find('.overlay-panel').fadeIn();
        if(showingElem.find('.previous').hasClass('first'))
            $(showingElem.find('.previous').hide());
        else
            $(showingElem.find('.previous').show());
    }
});

更新

要避免

next

和

previous

是

last

和

first

步骤，请分别检查下面的演示和代码

$('.next').on('click',function(){

    $('.grid-a1').find('.panel-a1').removeClass('opac');
    $('.grid-a1').find('.panel-a2').removeClass('in');
    $('.overlay-panel').fadeOut();
    if($(this).parents().closest('.grid-a1').nextAll().length!=0)
    {
        $(this).parents().closest('.grid-a1').next('.grid-a1').find('.panel-a1').addClass('opac');
        $(this).parents().closest('.grid-a1').next('.grid-a1').find('.panel-a2').addClass('in');
        $(this).parents().closest('.grid-a1').next('.grid-a1').find('.overlay-panel').fadeIn();
    }
});

$('.previous').on('click',function(){
    $('.grid-a1').find('.panel-a1').removeClass('opac');
    $('.grid-a1').find('.panel-a2').removeClass('in');
    $('.overlay-panel').fadeOut();
    if($(this).parents().closest('.grid-a1').prevAll().length!=0)
    {
        $(this).parents().closest('.grid-a1').prev('.grid-a1').find('.panel-a1').addClass('opac');
        $(this).parents().closest('.grid-a1').prev('.grid-a1').find('.panel-a2').addClass('in');
        $(this).parents().closest('.grid-a1').prev('.grid-a1').find('.overlay-panel').fadeIn();
    }
});

$('.next:last').addClass('last').hide();
$('.previous:first').addClass('first').hide();

$('.next').on('click',function(){

    $('.grid-a1').find('.panel-a1').removeClass('opac');
    $('.grid-a1').find('.panel-a2').removeClass('in');
    $('.overlay-panel').fadeOut();
    if($(this).parents().closest('.grid-a1').nextAll().length!=0)
    {
        var showingElem=$(this).parents().closest('.grid-a1').next('.grid-a1');
        showingElem.find('.panel-a1').addClass('opac');

        showingElem.find('.panel-a2').addClass('in');
        showingElem.find('.overlay-panel').fadeIn();
        if(showingElem.find('.next').hasClass('last'))
            $(showingElem.find('.next').hide());
        else
            $(showingElem.find('.next').show());
    }

});

$('.previous').on('click',function(){

    $('.grid-a1').find('.panel-a1').removeClass('opac');
    $('.grid-a1').find('.panel-a2').removeClass('in');
    $('.overlay-panel').fadeOut();
    if($(this).parents().closest('.grid-a1').prevAll().length!=0)
    {
        var showingElem=$(this).parents().closest('.grid-a1').prev('.grid-a1');
        showingElem.find('.panel-a1').addClass('opac');
        showingElem.find('.panel-a2').addClass('in');
        showingElem.find('.overlay-panel').fadeIn();
        if(showingElem.find('.previous').hasClass('first'))
            $(showingElem.find('.previous').hide());
        else
            $(showingElem.find('.previous').show());
    }
});

---

你能为这个做一个JSFIDLE吗？这里@Amy:）谢谢你。非常感谢，先生。我花了一整天才弄明白这件事。先生，你节省了我的时间。谢谢祝您愉快：）先生？我能问个问题吗。如果正在选择的div是第一个，我希望prev按钮隐藏，与正在选择的div是最后一个一样，next按钮将隐藏。主席先生，我将如何落实这项建议？Thanks@John.. 更新了答案！检查并让我知道！！无论如何！！快乐编码…）检查完毕，先生。它就像一个符咒：）谢谢你的更新：）随时！！：）祝你今天愉快！！：）先生我能问个问题吗。如果正在选择的div是第一个，我希望prev按钮隐藏，与正在选择的div是最后一个一样，next按钮将隐藏。主席先生，我将如何落实这项建议？感谢您的更新，先生：）

$('.next').on('click',function(){

    $('.grid-a1').find('.panel-a1').removeClass('opac');
    $('.grid-a1').find('.panel-a2').removeClass('in');
    $('.overlay-panel').fadeOut();
    if($(this).parents().closest('.grid-a1').nextAll().length!=0)
    {
        $(this).parents().closest('.grid-a1').next('.grid-a1').find('.panel-a1').addClass('opac');
        $(this).parents().closest('.grid-a1').next('.grid-a1').find('.panel-a2').addClass('in');
        $(this).parents().closest('.grid-a1').next('.grid-a1').find('.overlay-panel').fadeIn();
    }
});

$('.previous').on('click',function(){
    $('.grid-a1').find('.panel-a1').removeClass('opac');
    $('.grid-a1').find('.panel-a2').removeClass('in');
    $('.overlay-panel').fadeOut();
    if($(this).parents().closest('.grid-a1').prevAll().length!=0)
    {
        $(this).parents().closest('.grid-a1').prev('.grid-a1').find('.panel-a1').addClass('opac');
        $(this).parents().closest('.grid-a1').prev('.grid-a1').find('.panel-a2').addClass('in');
        $(this).parents().closest('.grid-a1').prev('.grid-a1').find('.overlay-panel').fadeIn();
    }
});

$('.next:last').addClass('last').hide();
$('.previous:first').addClass('first').hide();

$('.next').on('click',function(){

    $('.grid-a1').find('.panel-a1').removeClass('opac');
    $('.grid-a1').find('.panel-a2').removeClass('in');
    $('.overlay-panel').fadeOut();
    if($(this).parents().closest('.grid-a1').nextAll().length!=0)
    {
        var showingElem=$(this).parents().closest('.grid-a1').next('.grid-a1');
        showingElem.find('.panel-a1').addClass('opac');

        showingElem.find('.panel-a2').addClass('in');
        showingElem.find('.overlay-panel').fadeIn();
        if(showingElem.find('.next').hasClass('last'))
            $(showingElem.find('.next').hide());
        else
            $(showingElem.find('.next').show());
    }

});

$('.previous').on('click',function(){

    $('.grid-a1').find('.panel-a1').removeClass('opac');
    $('.grid-a1').find('.panel-a2').removeClass('in');
    $('.overlay-panel').fadeOut();
    if($(this).parents().closest('.grid-a1').prevAll().length!=0)
    {
        var showingElem=$(this).parents().closest('.grid-a1').prev('.grid-a1');
        showingElem.find('.panel-a1').addClass('opac');
        showingElem.find('.panel-a2').addClass('in');
        showingElem.find('.overlay-panel').fadeIn();
        if(showingElem.find('.previous').hasClass('first'))
            $(showingElem.find('.previous').hide());
        else
            $(showingElem.find('.previous').show());
    }
});