Question

我正在努力使用jQuery实现下一个和上一个按钮。我实现了自己的个性化模式或弹出窗口。就是这样。

CSS：

.grid-a1{ width: 500px; height: auto; background: #ededed; overflow: hidden; padding: 10px; margin: 5px; }
.link-a1{ color: #000; border: 1px solid #000; border-radius: 2px; padding: 5px; width: 300px; cursor: pointer; }
.panel-a1{ width: 100%; height: auto; overflow: hidden; padding: 5px; margin: 5px 0px; border-top: 1px solid #000; border-bottom: 1px solid #000; opacity: 1; -webkit-transition: all .2s; -o-transition: all .2s; transition: all .2s; }
.panel-a2{ position: fixed; top: -150%; right: 0; left: 0; bottom: 0; margin: auto; background: #fff; color: #000; width: 500px; height: 100px; padding: 10px; text-align: center; overflow: hidden; z-index: 999; -webkit-transition: all .5s; -o-transition: all .5s; transition: all .5s; }
.overlay-panel{ position: fixed; z-index: 998; background: rgba(0,0,0,0.7); top: 0; left: 0; right: 0; bottom: 0; width: 100%; display: none; }
.next, .previous{ border: 2px solid #000; border-radius: 3px; padding: 3px; margin: 3px; color: #000; display: block; cursor: pointer; }
.opac{ opacity: 0 !important; }
.in{ top: 0 !important; }

HTML：

<div class="grid-a1">
    <div class="link-a1">
        Clickable
    </div>        
    <div class="panel-a1">
        Content
    </div>
    <div class="overlay-panel"></div>
    <div class="panel-a2">
        Content

        <span class="next">Next</span> <span class="previous">Previous</span>
    </div>
</div>

<div class="grid-a1">
    <div class="link-a1">
        Clickable
    </div>        
    <div class="panel-a1">
        Content 2
    </div>
    <div class="overlay-panel"></div>
    <div class="panel-a2">
        Content 2

        <span class="next">Next</span> <span class="previous">Previous</span>
    </div>
</div>

<div class="grid-a1">
    <div class="link-a1">
        Clickable
    </div>        
    <div class="panel-a1">
        Content 2
    </div>
    <div class="overlay-panel"></div>
    <div class="panel-a2">
        Content 2

        <span class="next">Next</span> <span class="previous">Previous</span>
    </div>
</div>

JS

$('body').on('click', '.link-a1', function() {
    $(this).closest('.grid-a1').find('.panel-a1').addClass('opac');
    $(this).closest('.grid-a1').find('.panel-a2').addClass('in');
    $(this).closest('.grid-a1').find('.overlay-panel').fadeIn();
});

$('body').on('click', '.overlay-panel', function() {
    $(this).closest('.grid-a1').find('.panel-a1').removeClass('opac');
    $(this).closest('.grid-a1').find('.panel-a2').removeClass('in');
    $(this).closest('.grid-a1').find(this).fadeOut();
});

当我点击下一个按钮进入下一个div时，如何在jQuery中实现它，并关闭当前的按钮，单击上一个按钮。任何答案都非常感谢。谢谢:)）

Answer 1

以下是适用于next和previous按钮

的2个事件

<强> DEMO HERE

$('.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和previous分别为last和first步骤，请检查以下演示和代码

<强> UPDATED DEMO

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

Answer 2

试试这个，http://jsfiddle.net/mxdstvhx/10/

$('body').on('click', '.next', function(){
   $(this).parents('.grid-a1').find('.overlay-panel').click();
   $(this).parents('.grid-a1').next('.grid-a1').find('.link-a1').click();
});

$('body').on('click', '.previous', function(){
   $(this).parents('.grid-a1').find('.overlay-panel').click();
   $(this).parents('.grid-a1').prev('.grid-a1').find('.link-a1').click();
});

$('body').on('click', '.link-a1', function() {
  $(this).closest('.grid-a1').find('.panel-a1').addClass('opac');
  $(this).closest('.grid-a1').find('.panel-a2').addClass('in');
  $(this).closest('.grid-a1').find('.overlay-panel').fadeIn();
  if ($(this).parents('.grid-a1').prev('.grid-a1').size() == 0) {
    $(this).parents('.grid-a1').find('.previous').hide();
  }
  if ($(this).parents('.grid-a1').next('.grid-a1').size() == 0) {
    $(this).parents('.grid-a1').find('.next').hide();
  }
});

自定义模式与下一个和以前的jQuery

2 个答案: