Klasse aus Container Elternklasse mit jQuery entfernen?

Question

wie zu entfernen und Klasse Klassencontainer Elternklasse mit jQuery hinzufügen? ich will blueContent entfernen, wenn i cardTab2 klicken und greenContent hinzufügen

<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

Sie sollten . Klasse Selektoren hinzufügen und entfernen . aus removeClass() und addClass() Methoden:

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

Answer 2

Hallo, Sie können diesen Code tatsächlich verwenden Sie Klassenselektor nicht richtig verwenden

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