Question

我对JQuery很陌生，所以我制作了自己的灯箱和退出按钮，效果很好。我只是想知道如何制作它所以我可以有一个下一个和上一个按钮，它将查看下一个图像或div与分配适当的类。例如，我的HTML：

<button id="button1">Click Here</button>

<div id="view" class="outter">
    <img src="http://go.iomega.com/static/img/x_button_close.png" class="exit_button" id="close_view" />
        <div class="inner">
            <h1>stuff inside of the first div</h1>
        </div>
    <button id="previous">Prev</button><button id="next">Next</button>
</div>

<div id="view" class="outter">
    <img src="images/closebox.png" class="exit_button" id="close_view" />
        <div class="inner">
            <h1>stuff inside of the second div</h1>
        </div>
</div>

我的CSS

.outter{
    display:none; 
    width:620px; 
    height:380px; 
    top:20%; 
    left:17.5%; 
    position:absolute;
    z-index:2; 
}
.inner{
    width:600px; 
    height:330px; 
    background-color:white; 
    border:1px solid #000; 
    -moz-box-shadow:0px 0px 10px #111; 
    -webkit-box-shadow:0px 0px 10px #111; 
    box-shadow:0px 0px 10px #111; 
    margin-top:15px;
    z-index:1; 
}
.exit_button{ 
    float:right;
    z-index:3;
}

和我的JQuery

$(document).ready(function(){
        $('#button1').click(function(){ 
            $('#view').fadeIn(750);
        }); 
        $('#close_view').click(function(){ 
            $('#view').fadeOut();
        }); 
});

以下是JSFiddle中的所有内容 http://jsfiddle.net/9cU5C/29/

这一切都运行正常，但我希望能够在那里添加一大堆带有“outter”类的div并让下一个按钮翻转到下一个“outter”入级div，反之亦然上一个按钮。我希望我能正确地解释这个并且听起来不傻，我对JQuery很陌生，我喜欢自己做这样的事情来改善它。我试图解决这个问题，发现无法想出任何我可以开始工作的事情。

谢谢一群人！ -Mike

Answer 1

使用或.next（）,. prev（）和.closest（）。另外，在“下一个”和“上一个”按钮上设置课程。

伪：

$('.next').click(function() {
   $('.outter').hide();
   $(this).closest('outter').next('outter').show();
});

$('.previous').click(function() {
   $('.outter').hide();
   $(this).closest('outter').prev('outter').show();
});

概念是隐藏所有元素，然后使适当的元素可见。

完成学习练习后，请务必查看灯箱代码，看看它是如何完成的。首先尝试，然后找出“最佳”方法总是很棒。

JQuery在线查看下一课

1 个答案: