ブートストラップのタブが親の背景を変更します。より洗練されたソリューションを見つけようとしているJquery

Question

しかし、私のjqueryのスキルは今のところ限られています。

私は、以下の機能を達成するためのより良い方法があると思います。 少数の言葉で。クリック時に親の背景を変更しようとしています。

今、私はクラスを追加し、他のボタンから他のクラスを削除するだけです。

関連HTML：

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

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

より洗練されたより良い解決策を教えてもらえますか、または多少の研究をすることができるキーワードかもしれません。今のところ、維持するのは非常に難しいです。私はいくつかのボタンを追加します。

ありがとうございました！

編集：私はtoggleClassについて知っています。しかし、それはその場合にはうまくいきませんでした。 2回目のクリックでクラスが削除されたためです。

Answer 1

これは、単にデータ属性を使用して、ボタン自体にクラスを保持します。 removeClass内の関数を正規表現で使用して、新しいクラスを適用する前に初期のトグルクラスを削除することもできます。

ボタンを追加するときは、ボタンに適切なdata-target-class属性があり、cssに適切なクラスが設定されていることを確認する必要があります。一貫した命名規則に従っている限り、javascriptを変更する必要はありません。

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