Question

下面是我的代码，当我点击下一个方框时，它显示方框B第二个方框并隐藏方框A，依此类推如果方框C装入最后一个方框，它将显示警告“没有方框”

我的CSS

.hide{ display:none}

我的HTML

<div class="q">Box A</div>
<div class="q hide">Box B</div>
<div class="q hide">Box C</div>
<a href="#" id="btnNext">Next Box</a>
<div id="alert" class="hide">There is no Box left</div>

我的JS脚本

$(function() {
    $("#btnNext").click( function() {
        $(this).parents('.q').fadeOut(500, function() {
              if( $('.q:last') ) {
                   $("#alert").fadeIn( 500 );
              } else {
                   $(this).next().fadeIn( 500 );
              }       
        });
    });
});

Answer 1

请改用此代码。

 $("#btnNext").click(function(){
     $('.q:visible').fadeOut(500, function(){
         if($(this).index()==$('.q').length-1){
                        $("#alert").fadeIn(500);
                    }else{  
                        $(this).next().fadeIn(500);
                    }                
                });

            });

您无需更改HTML中的任何内容。

Answer 2

$(this).parents('.q')不起作用; .q div中没有一个是a的父级。此外，您需要确保只选择第一个.q。此外，一旦div淡出，它仍然在DOM中，所以一旦完成，你就会想要从DOM中删除它。否则，同一个人每次都会淡出。

$(this).parent().find('.q')[0].fadeOut(500, function() {
    if ($(this).is(':last')) {
        $('#alert').fadeIn(500);
    } else {
        $(this).next().fadeIn(500);
    }
    $(this).remove();
});

Answer 3

试试这个

$(function() {
 $("#btnNext").click(function(){
                $('.q').fadeOut(500, function(){
                    if($(this).index() == $('.q').length-1){
                        $("#alert").fadeIn(500);
                    }else{  
                        $(this).next().fadeIn(500);
                    }                
                });

            });
});

基本的jQuery fadeIn，fadeOut问题

3 个答案: