使用jQuery从容器父类中删除类？

Question

如何使用jQuery删除和添加类容器父类？ 我想在单击cardTab2并添加greenContent时删除blueContent

<div class="mainContent blueContent">
    <div class="container">
        <div class="cardBox">
            <ul class="cardButton nav nav-tabs">
                <li role="presentation" class="cardSelect cardTab1 active">
                    <a href="#cardTab1" aria-controls="home" role="tab" data-toggle="tab"><img src="images/smartCard.png" /><span>Smart Payout Card</span></a>
                </li>
                <li role="presentation" class="cardSelect cardTab2">
                    <a href="#cardTab2" aria-controls="home" role="tab" data-toggle="tab"><img src="images/card2.png" /><span>Achiever Card</span></a>
                </li>
            </ul>
        </div>
    </div>
</div>

jQuery的

(function($) {
  $('.cardTab1 , .cardTab2').bind('click', function() { 
  if($(this).hasClass('cardTab1')) {
     $('cardTab1').parents('.mainContent').removeClass('.greenContent');
      $('cardTab1').parents('.mainContent').addClass('.buleContent');
  } else if($(this).hasClass('cardTab2')) {
    $('cardTab1').parents('.mainContent').removeClass('.buleContent');
    $('cardTab1').parents('.mainContent').addClass('.greenContent');
  }
});
})(jQuery);

Answer 1

嗨，您实际上可以使用此代码，但您没有正确使用类选择器

 (function($) { $('.cardTab1 , .cardTab2').bind('click', function() { if($(this).hasClass('cardTab1')) { $('.cardTab1').parents('.mainContent').removeClass('greenContent'); $('.cardTab1').parents('.mainContent').addClass('buleContent'); } else if($(this).hasClass('cardTab2')) { $('.cardTab2').parents('.mainContent').removeClass('buleContent'); $('.cardTab2').parents('.mainContent').addClass('greenContent'); } }); })(jQuery); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="mainContent blueContent"> <div class="container"> <div class="cardBox"> <ul class="cardButton nav nav-tabs"> <li role="presentation" class="cardSelect cardTab1 active"> <a href="#cardTab1" aria-controls="home" role="tab" data-toggle="tab"><img src="images/smartCard.png" /><span>Smart Payout Card</span></a> </li> <li role="presentation" class="cardSelect cardTab2"> <a href="#cardTab2" aria-controls="home" role="tab" data-toggle="tab"><img src="images/card2.png" /><span>Achiever Card</span></a> </li> </ul> </div> </div> </div> 

Answer 2

您应该添加. 对选择器进行分类并删除. 从removeClass()和addClass()方法中：

(function($) {
  $('.cardTab1 , .cardTab2').bind('click', function() { 
  if($(this).hasClass('cardTab1')) {
     $('.cardTab1').parents('.mainContent').removeClass('greenContent');
      $('.cardTab1').parents('.mainContent').addClass('buleContent');
  } else if($(this).hasClass('cardTab2')) {
    $('.cardTab2').parents('.mainContent').removeClass('buleContent');
    $('.cardTab2').parents('.mainContent').addClass('greenContent');
  }
});
})(jQuery);