クラスがJavaScriptで存在するかどうかを確認する方法

JavaScriptのclassListプロパティのcontains（）を使用すると、要素にクラスが存在するかどうかを簡単かつ迅速に確認できます。 メソッド。

まず、 classList.contains（）を使用するための一般的な式を見てみましょう。 次に、実用的について見ていきます。 使用事例。

classList.contains（）式

var element = document.querySelector("selector")
element.classList.contains("class")

上記の一般的な例では、用途の広い querySelector（）を使用しています。 セレクター名を介してターゲット要素を検索するメソッド。セレクターは、クラスセレクター、要素セレクター、または別のセレクタータイプである可能性があります。

次に、見つけた要素を querySelector（）で割り当てます。 宣言されたelementに 変数。

次に、classListプロパティの contains（）を添付します 要素へのメソッド その変数参照を介して。次に、 contains（）の内部 メソッドの引数（括弧内）は、存在するかどうかを確認する「クラス」の名前を指定します。

一般的な例は退屈です。実用的にしましょう！

整頓されたニュースフィード

classList.contains（）によるフィルタリング
—実際の使用例

さまざまなカテゴリのニュースフィードが混在するウェブサイトにアクセスしています。しかし、あなたはテクノロジーについて読むことにしか興味がありません。

雑然としたニュースフィードは冒涜的です。 classList.contains（）を使用して、他のすべてのカテゴリを除外してみましょう メソッド。

まず、HTMLを追加して、使用するコンテンツを作成します。次に、すばやくスタイルを設定して、JavaScriptに進みます。

ニュースフィードのHTML

<div class="wrapper">
  <h1>Newsfeed</h1>

  <div class="news-feed">
    <h3 class="headline">
      <a class="link category-health" href="#">Health</a>
    </h3>
    <h3 class="headline">
      <a class="link category-finances" href="#">Finances</a>
    </h3>
    <h3 class="headline">
      <a class="link category-politics" href="#">Politics</a>
    </h3>
    <h3 class="headline">
      <a class="link category-nature" href="#">Nature</a>
    </h3>
    <h3 class="headline">
      <a class="link category-humor" href="#">Humor</a>
    </h3>
    <h3 class="headline">
      <a class="link category-weather" href="#">Weather</a>
    </h3>
    <h3 class="headline">
      <a class="link category-technology" href="#">Technology</a>
    </h3>
    <h3 class="headline">
      <a class="link category-sports" href="#">Sports</a>
    </h3>
  </div>

  <div class="fixed-container">
    <span>Filter:</span>
    <button class="btn-technology">Technology</button>
  </div>
</div>
<!-- wrapper -->

HTMLコンテンツには次のものがあります：

• 大きな見出し。
• さまざまなカテゴリのニュースフィード。
• ニュースフィードのほかに、テクノロジーと呼ばれるボタンがあります。これは、テクノロジー以外のすべてのトピックを切り替える（非表示/表示）ために使用するボタンです。

明らかに、上記のニュースフィードの例には、（説明のために）いくつかのニュース項目しかないため、雑然とは見えません。しかし、実際の混合ニュースフィード 各ニュースカテゴリから無数の記事があり、フィードが殺到します。フィルタリングボタンが役立つのはそのときです。

CSSスタイリング

.js-hide を除いて、以下のすべてのCSSは表面的なものであり、オプションです。 classは、次のセグメントでJavaScriptで使用するヘルパークラスです。

body {
  font-family: "Source Sans Pro", "Helvetica", "Sans-Serif";
}

.wrapper {
  position: relative;
  padding-left: 1rem;
  padding-right: 1rem;
  margin: 2rem auto;
  max-width: 50em;
}

.news-feed {
  border: 1px solid #eee;
  max-height: 256px;
  overflow-y: scroll;
}

.headline {
  font-size: 1.25rem;
  padding: 0.25rem 1.5rem;
}

.link {
  color: #252525;
  text-decoration: none;
}

.fixed-container {
  position: fixed;
  bottom: 0;
  left: 0;
  padding: 1.5rem;
}

.btn-technology {
  cursor: pointer;
  font-size: 1rem;
  padding: 0.5rem 1rem;
  margin-top: 2rem;
  margin-left: 1rem;
  border-radius: 4px;
  border: 1px solid #82b97e;
  outline: none;
}

.js-hide {
  display: none;
}

その.js-hideを必ず追加してください CSSスタイルシートにクラス分けして、JavaScriptに移りましょう！

JavaScript

次のコードをコピーしてJSファイルに貼り付けます。すべてがどのように機能するかをすぐ下で説明します。

var btnTechnology = document.querySelector(".btn-technology")
var allNewsCategories = document.querySelectorAll(".news-feed .link")

function showCategoryTechnology() {
  for (var i = 0; i < allNewsCategories.length; i++) {
    if (!allNewsCategories[i].classList.contains("category-technology")) {
      allNewsCategories[i].parentElement.classList.toggle("js-hide")
    }
  }
}
btnTechnology.addEventListener("click", showCategoryTechnology)

JavaScriptコードのしくみ

• 最初にquerySelector（）を使用します クラスセレクター.btn-technologyを介してTechnlogyボタン要素を取得します 。これは、後でフィルタリング機能のトリガーとして機能します。ボタン要素をbtn-technologyという変数に割り当てます 。
• 次に、 querySelectorAll（）を使用します すべてのニュースフィードを取得するには（ .news-feed ）アイテムを選択し、クラス名（ .link ）で各アイテムのリンクを選択します ）。次に、すべてのニュースアイテムのリンクを allNewsCategoriesという変数に割り当てます。 。
• 次に、関数 showCategoryTechnology（）{..}を作成します。 テクノロジーボタンがクリックされたときに呼び出されます。
• 関数本体の内部で、ループします。 ニュースフィード要素内のすべてのアイテム（）を介して、それらを配列 [i]に格納します
• ループ内に、条件付きのifステートメントを追加します。 これは次のように述べています。「リストのいずれかのアイテムを繰り返した場合は、しない クラス.category-technologyが含まれています —次に、 .js-hideを使用してclassList.toggleメソッドを実行します それらのアイテムのクラス。
• 最後の行に、 addEventListener（）を添付します ボタン要素へのメソッド。イベントリスナーに「クリック」イベントをリッスンするように指示します。ボタンがクリックされると、 showCategoryTechnology（）が呼び出されます。 この切り替え機能を可能にするコードブロック全体を実行する関数。

！ allNewsCategories [i] の前に配置する記号（論理演算子） ifの「not」部分を処理するのは 声明。 ！を削除した場合 そうすれば、私たちのコードは現在とは逆のことをします。