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');
  }
});

Online sample -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');
    }
});

以下是fiddle的链接。

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');
        }
    }
});

Fiddle

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

2 个答案: