Question

如果我这样做，它会起作用：

$(document).ready(function() {
    $('.button1').click(function() {
        var get_id = $(this).attr('id');
        $('.outter').fadeIn(750);
        $('#div_'+get_id).show();

    });
    $('.exit_button').click(function() {
        $('.outter').fadeOut();
        $('.inner_content').hide();
    });

    $('.next').click(function() {   
        var current1 = $('.inner_content:visible');                     
                current1.hide();
        current1.next('.inner_content').show();  

    });

    $('.previous').click(function() {
        var current2 = $('.inner_content:visible');
        current2.hide();
        current2.prev('.inner_content').show(); 

    });


});

但是我希望前一个和下一个按钮在他们的班级来到最后一个或第一个时禁用，所以我这样做：

$(document).ready(function() {
    $('.button1').click(function() {
        var get_id = $(this).attr('id');
        $('.outter').fadeIn(750);
        $('#div_'+get_id).show();

    });
    $('.exit_button').click(function() {
        $('.outter').fadeOut();
        $('.inner_content').hide();
    });

    $('.next').click(function() {   
        var current1 = $('.inner_content:visible');
        var get_id2 = current1.attr('id');
        if(('#'+get_id2+'.inner_content').is(':last'))
        {
        }
        else
        {   
        current1.hide();
        current1.next('.inner_content').show();  
        }
    });

    $('.previous').click(function() {
        var current2 = $('.inner_content:visible');
        var get_id3 = current2.attr('id');      
        if(('#'+get_id3+'.inner_content').is(':first'))
        {
        }
        else
        {
        current2.hide();
        current2.prev('.inner_content').show(); 
        }
    });


});

但我根本无法解决这个问题。

我的HTML：

<img src="thumbs/1.jpg" class="button1" id="pic_01" />
<img src="thumbs/2.jpg" class="button1" id="pic_02" />
<img src="thumbs/3.jpg" class="button1" id="pic_03" />
<img src="thumbs/4.jpg" class="button1" id="pic_04" />

<div class="outter">
    <img src="http://go.iomega.com/static/img/x_button_close.png" class="exit_button" />
        <div class="inner">

          <div class="inner_content"  id="div_pic_01">
            <img src="thumbs/1.jpg" />
          </div>
          <div class="inner_content"  id="div_pic_02">
            <img src="thumbs/2.jpg" />
          </div>
          <div class="inner_content"  id="div_pic_03">
            <img src="thumbs/3.jpg" />
          </div>
          <div class="inner_content"  id="div_pic_04">
            <img src="thumbs/4.jpg" />
          </div>  

        </div>   
    <button class="previous">Prev</button><button class="next">Next</button>
</div>

我的CSS：

.outter{
    display:none; 
    width:620px; 
    height:380px; 
    top:20%; 
    left:17.5%; 
    position:absolute;
    z-index:4; 
}
.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:3;
}
.exit_button{ 
    float:right;
    z-index:5;
}
.inner_content{
    display:none; 
}

我希望这是有道理的。因此，当您使用上一个和下一个按钮滚动浏览并且最后一张照片出现时，您不能再向前移动，只能向后移动或反之亦然。

这是我在这个小提琴中放在一起的一个简单示例http://jsfiddle.net/DadYW/7/希望它有一些意义，我对JQuery很新，这是我自己尝试的前几个项目之一。谢谢一堆 -Mike

Answer 1

我会在导航到下一个或上一个之后禁用按钮（或按照您的意图隐藏它），而不是点击：

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

    var current1 = $('.inner_content:visible'),
        $next = current1.next('.inner_content');

    // hide current / show next
    current1.hide();
    $next.show();

    // if next is last, disable the button
    if ($next.is(':last-child')) {
        $(this).prop('disabled', true);
    }

    // enable the previous button
    $('.previous').prop('disabled', false);
});

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

    var current2 = $('.inner_content:visible'),
        $prev = current2.prev('.inner_content');

    // hide current / show previous
    current2.hide();
    $prev.show();

    // if previous is first, disable the button
    if ($prev.is(':first-child')) {
        $(this).prop('disabled', true);
    }

    // enable the next button
    $('.next').prop('disabled', false);
});

<强> DEMO

查找第一个和最后一个类JQuery

1 个答案: