jsで作成中のフィルター機能で「all」とその他カテゴリボタンで挙動を変えたいです

前提・実現したいこと

はじめまして。現在、独学でweb制作を勉強している者です。

現在jsで記事一覧などにフィルターをかける機能を作成しているのですが、
行き詰まってしまう箇所があり、質問させて頂きます。

前提：
「all」とその他のカテゴリのボタンがある。
ボタン押下時に、カテゴリごとにアイテムの表示が切り替わる。

フィルターの挙動で実現したいのは、下記の内容です。

①「all」のボタンは単体でしかアクティブになれない。
A -- 「all」を押すとその他のボタンのアクティブ状態が解除される。
B -- 「all」以外のボタンを押すと、「all」のアクティブ状態が解除される。
②「all」以外のボタンは同時にアクティブ状態になれる。
（red・blueのカテゴリーを同時に表示など）

なお、記事の表示・非表示については、ボタン押下時にdata-filterを取得し、それを元にmain要素にクラスを追加し、事前にクラス追加時の状態をcssで定義することで実現しています。
また、「all」については、デフォルトではアクティブ状態の想定です。

発生している問題

①-B、②については実現できているのですが、①-Aが実現できない状態です。

該当のソースコード

HTML
1<head>
2    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
3</head>
4<main class="main category-all">
5    <div class="main-container">
6        <div class="filter-container">
7            <button class="all-btn filter-btn active" data-filter="all" type="button" name="ranking" value="人気の記事">all</button>
8            <button class="child-btn filter-btn" data-filter="red" type="button" name="red" value="red">red</button>
9            <button class="child-btn filter-btn" data-filter="blue" type="button" name="blue" value="blue">blue</button>
10            <button class="child-btn filter-btn" data-filter="green" type="button" name="green" value="green">green</button>
11        </div><!-- /filter-container -->
12        <div class="article-container">
13            <div class="article-item all red"></div>
14            <div class="article-item all red"></div>
15            <div class="article-item all green"></div>
16            <div class="article-item all blue"></div>
17            <div class="article-item all green"></div>
18            <div class="article-item all blue"></div>
19            <div class="article-item all red"></div>
20            <div class="article-item all green"></div>
21            <div class="article-item all blue"></div>
22            <div class="article-item all green"></div>
23            <div class="article-item all blue"></div>
24            <div class="article-item all red"></div>
25        </div><!-- /article-container -->
26    </div><!-- /main-container -->
27</main>
28```HTML
29
30```CSS
31.main {
32    padding: 10vw
33}
34.main-container {
35    text-align: center;
36}
37.filter-container {
38    padding-bottom: 60px;
39}
40.filter-container .filter-btn {
41    display: inline-flex;
42    font-size: 16px;
43    font-weight: 700;
44    padding: 15px 30px;
45    background-color: #fff;
46    border: 1px solid gray;
47    color: gray;
48    cursor: pointer;
49}
50.filter-container .filter-btn + .filter-btn{
51    margin-left: 30px;
52}
53.filter-container .filter-btn.active {
54    border: 1px solid gray;
55    background-color: gray;
56    color: #FFF;
57}
58.article-item {
59    display: none;
60    opacity: 0;
61    width: 200px;
62    height: 200px;
63    margin-bottom: 40px;
64}
65main.category-all .all,
66main.category-red .red,
67main.category-blue .blue,
68main.category-green .green {
69    display: inline-block;
70    opacity: 1;
71}
72.red {
73    background-color: red;
74}
75.blue {
76    background-color: blue;
77}
78.green {
79    background-color: green;
80}

JavaScript
1$(".filter-btn").on("click", function() {
2    var selected = $(this).attr('data-filter');
3    $(this).toggleClass('active');
4    if($(this).hasClass('.all-btn')){
5        $('.child-btn').removeClass('active');
6        $('main').removeClass().addClass('category-all');
7    }else {
8        $('.all-btn').removeClass('active');
9        $('main').removeClass('category-all').toggleClass('category-' + selected);
10    }
11});

試したこと

jsの記述の4~6行目のif文がうまく機能していないところまでは分かったのですが、
そこからいろいろ調べてみても解決できていない状態です。
else以降の記述は動作しているようなので、ifの箇所の書き方の問題かと思っています。
ご確認頂けますと幸いです。

補足情報（FW/ツールのバージョンなど）

ブラウザはChromeを使い、検証ツールなどでチェックしています。

JavaScriptについては初心者で、今回のコードも、ネットで調べたことを元に、
コードをつぎはぎしたり、自分なりのアレンジをしてみたりしております。

そのため、文法として間違っている箇所もあるかもしれません。
また、ご回答の際に、解説も添えていただけますと助かります。

以上、よろしくお願い致します。

行動規範の内容に同意します

回答1件

ベストアンサー

hasClassの指定にドットは入りません。また、追記した部分を書いておかないと、クリックするたびにall-btnのactiveクラスがトグルされてしまいます。

javascript
1if($(this).hasClass('all-btn')){  /* 修正 */
2  $('.child-btn').removeClass('active');
3  $(this).addClass('active');  /* 追記 */
4  $('main').removeClass().addClass('category-all');
5}