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

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

＆＃13;

(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);

＆＃13;

<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>

＆＃13;

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

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

2 个答案: