Question

如何隐藏第一个div中的后退按钮并将其放回第二个div，类似于下一个按钮

下面的代码是有效的，但如果它不是最后一个和第一个div，它不会放回下一个/后退按钮

<div class="case active">
  <div>content 1</div>
</div>

<div class="case">
  <div>content 2</div>
</div> 

<div class="case">
  <div>content 3</div>
</div> 


<div class="prev-btn">
  <span id="prev" class="btn btn-default"">Back</span>
</div>
<div class="next-btn">
  <span id="next" class="btn btn-default"">Next</span>  
</div>

    <script>
        $(document).ready(function(){
            $('#next').click(function(){
                if ($('.active').next('.case').length) {
                    $('.active').removeClass('active')
                                .next('.case')
                                .addClass('active', '.case');
                    if ($('.active').next('.case').length==0) {
                        $('#next').hide()
                    }
                }
            });

            $('#prev').click(function(){
                if ($('.active').prev('.case').length) {
                        $('.active').removeClass('active')
                                .prev('.case')
                                .addClass('active');
                    if ($('.active').next('.case').length==1) {
                        $('#prev').hide()
                    }              
                } 
            });

        });
    </script>

Answer 1

我会尝试这个，我希望它有所帮助

if ($('.case:first').hasClass('active')) {
$('.prev-btn').css('display','none');
}

if ($('.case:last').hasClass('active')) {
$('.next-btn').css('display','none');
}

Answer 2

我设法通过添加

来修复它

$('#next').click(function(){
        if ($('.active').next('.case').length) {
            $('.active').removeClass('active')
                        .next('.case')
                        .addClass('active', '.case');
            if ($('.active').next('.case').length==0) {
                $('#next').hide()
            } 

            if ($('.active').prev('.case').length!=0) {
                $('#prev').show()
            } 


        }
   } 

$('#prev').click(function(){
        if ($('.active').prev('.case').length) {
            $('.active').removeClass('active')
                        .prev('.case')
                        .addClass('active');

            if ($('.active').next('.case').length!=0) {
                $('#next').show()
            } 

            if ($('.active').prev('.case').length==0) {
                $('#prev').hide()
            } 



        }

隐藏第一个/最后一个div中的下一个/后一个按钮

2 个答案: