Les onglets Bootstrap changent l'arrière-plan parent Jquery

Question

J'essaie de trouver une solution plus élégante. Mais mes compétences jquery sont limitées dès maintenant.

J'imagine qu'il existe une meilleure façon d'accomplir la fonction ci-dessous. En quelques mots. J'essaye de changer l'arrière-plan du parent sur le clic.

Maintenant, je viens d'ajouter une classe et de supprimer d'autres classes possibles des autres boutons.

HTML pertinent:

<div class="panel panel-widget widget-latest-posts"> 
       <div class="panel-heading"> 
        <h3 class="widget-title">Ebenfalls lesenswert</h3> 
       </div> 

       <div class="panel-body"> 
        <div class="btn-pref btn-group btn-group-justified btn-group" role="group" aria-label="..."> 
          <div class="btn-group" role="group"> 
           <button type="button" id="btn-popular-posts" class="btn btn-popular-posts" href="#tab1" data-toggle="tab"><i class="fa fa-fire"></i> 
            <span class="hidden-xs">Beliebt</span> 
           </button> 
          </div> 
          <div class="btn-group" role="group"> 
           <button type="button" id="btn-latest-posts" class="btn btn-latest-posts" href="#tab2" data-toggle="tab"><i class="fa fa-clock-o"></i> 
            <span class="hidden-xs">Neu</span> 
           </button> 
          </div> 
          <div class="btn-group" role="group"> 
           <button type="button" id="btn-popular-comments" class="btn btn-popular-comments" href="#tab3" data-toggle="tab"><i class="fa fa-commenting-o"></i> 
            <span class="hidden-xs">Aktiv</span> 
           </button> 
          </div> 
         </div> 

CSS pertinente:

.bpp-toggled { 
    background: orange !important; 
} 
.blp-toggled { 
    background: lime !important; 
} 
.bpc-toggled { 
    background: purple !important; 
} 

Jquery

$("#btn-popular-posts").click(function() { 

    $('.widget-latest-posts').addClass('bpp-toggled'); 
    $('.widget-latest-posts').removeClass('blp-toggled'); 
    $('.widget-latest-posts').removeClass('bpc-toggled'); 
}); 

$("#btn-latest-posts").click(function() { 

    $('.widget-latest-posts').addClass('blp-toggled'); 
    $('.widget-latest-posts').removeClass('bpp-toggled'); 
    $('.widget-latest-posts').removeClass('bpc-toggled'); 
}); 

$("#btn-popular-comments").click(function() { 

    $('.widget-latest-posts').addClass('bpc-toggled'); 
    $('.widget-latest-posts').removeClass('blp-toggled'); 
    $('.widget-latest-posts').removeClass('bpp-toggled'); 
}); 

Pouvez-vous s'il vous plaît m'aider avec une meilleure solution plus élégante ou mot-clé que je pourrais faire quelques recherches sur. Parce que maintenant, c'est très difficile à maintenir étant donné que je vais ajouter quelques boutons de plus.

Merci pour l'aide!

Editer: Je connais toggleClass. Mais cela n'a pas fonctionné dans ce cas. Parce qu'il vient de supprimer la classe au 2e clic.

Answer 1

Ceci utilise simplement des attributs de données pour maintenir la classe dans le bouton lui-même. Vous pouvez également utiliser une fonction dans la classe removeClass avec une expression régulière pour supprimer la classe initiale basculée avant d'appliquer la nouvelle.

À l'avenir, lorsque vous ajouterez des boutons, vous n'aurez plus qu'à vous assurer que le bouton possède l'attribut data-target-classe approprié et la classe appropriée définie dans votre css. Aucun changement au javascript ne serait nécessaire tant que vous suiviez des conventions de nommage cohérentes.

$("button[data-toggle='tab']").click(function() { 
 
    $('.widget-latest-posts').removeClass(function (index, className) { 
 
     return (className.match (/([a-z]{3,3})-toggled/g) || []).join(' '); 
 
    } 
 
); 
 
    $('.widget-latest-posts').addClass($(this).attr("data-toggled-class")); 
 
});

.bpp-toggled { 
 
    background: orange !important; 
 
} 
 
.blp-toggled { 
 
    background: lime !important; 
 
} 
 
.bpc-toggled { 
 
    background: purple !important; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="panel panel-widget widget-latest-posts"> 
 
<div class="panel-heading"> 
 
<h3 class="widget-title">Ebenfalls lesenswert</h3> 
 
</div> 
 

 
<div class="panel-body"> 
 
<div class="btn-pref btn-group btn-group-justified btn-group" role="group" aria-label="..."> 
 
    <div class="btn-group" role="group"> 
 
     <button type="button" id="btn-popular-posts" class="btn btn-popular-posts" href="#tab1" data-toggle="tab" data-toggled-class="bpp-toggled"><i class="fa fa-fire"></i> 
 
      <span class="hidden-xs">Beliebt</span> 
 
     </button> 
 
    </div> 
 
    <div class="btn-group" role="group"> 
 
     <button type="button" id="btn-latest-posts" class="btn btn-latest-posts" href="#tab2" data-toggle="tab" data-toggled-class="blp-toggled"><i class="fa fa-clock-o"></i> 
 
      <span class="hidden-xs">Neu</span> 
 
     </button> 
 
    </div> 
 
    <div class="btn-group" role="group"> 
 
     <button type="button" id="btn-popular-comments" class="btn btn-popular-comments" href="#tab3" data-toggle="tab" data-toggled-class="bpc-toggled"><i class="fa fa-commenting-o"></i> 
 
      <span class="hidden-xs">Aktiv</span> 
 
     </button> 
 
    </div> 
 
</div>