Javascript 基本jQuery fadeIn，淡出问题

下面是我的代码，当我单击“下一个框”时，它会显示框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>

$（这个）。家长（'.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();
});

$（这个）。家长（'.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();
});

请改用此代码

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

            });

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

使用此代码

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

            });

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

试试这个

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

            });
});

试试这个

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

            });
});

---

@jacob你的右边我试过了，但当我单击下一步时，它会显示警报“没有剩余方框”不是下一个方框B这是演示@jacob当我单击“下一个方框”时不会发生@jacob你的右边我试过了，但当我单击下一步时，它会显示警报“没有剩余方框”不是下一个方框B这是演示@jacob当我单击“下一个方框”时不会发生