javascript - jquery 最后一个子边框 if..else

Question

HTML

<div class="aa">
    <div class="bb">1
    </div>
     <div class="cc">a
    </div>
</div>
<div class="aa">
    <div class="bb">2
    </div>
     <div class="cc">b
    </div>
</div>

jQuery

$('.bb:last').addClass('red');
$('.bb').click(function(){
    $(this).next('.cc').fadeToggle();
    if(!$('.cc:last').is(':hidden')){
        if($('.bb:last').hasClass('red')){
            $('.cc:last').addClass('red');
            $('.bb:last').removeClass('red');
        }
    }else{
    $('.bb:last').addClass('red');
  }
});

在线示例-Fiddle

单击框时2，应删除边框，bb然后将其分配给“cc”，第二次单击边框应返回bb当我无法正确处理时。从不 else{$('.bb:last').addClass('red');}工作。

有人可以帮我吗？谢谢

Answer 1

我认为这应该可以解决您遇到的问题。

$('.bb:last').addClass('red');
$('.bb').click(function(){
    $(this).next('.cc').fadeToggle();
    if($('.bb:last').is(this)){
        $(this).toggleClass('red');
    }
});

这是小提琴的链接。

Answer 2

您的else子句与错误的if. 这可以正常工作：

$('.bb:last').addClass('red');
$('.bb').click(function () {
    $(this).next('.cc').fadeToggle();
    if (!$('.bb:last').is(':hidden')) {
        if ($('.bb:last').hasClass('red')) {
            $('.cc:last').addClass('red');
            $('.bb:last').removeClass('red');
        } else {
            $('.bb:last').addClass('red');
        }
    }
});

小提琴