未分類

【jQuery入門】 if hasClassって知ってる？クラスの有無を判定する時のコツ。

公開日 2024/1/25 最終更新日 2024/11/19

結論：function内ifで指定する時は「this」とすればよい。

これでli一つずつに対して、hasClassしているか調べてくれることになる。

【わかりやすい説明】http://alphasis.info/2011/12/jquery-api-each-function-index-element/

See the Pen if hasClass by aimeimm (@aimeimm) on CodePen.

①1stSTEP
if hasClassでクラスの有無を判定し、コンソールに表示させる。

HTMLコード

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            color: #000;
        }
        .active{
            color: red;
        }
    </style>
</head>

<body>
    <ul>
        <li class="good-morning">おはようございます</li>
        <li class="good-evening">こんばんは</li>
        <li class="good-night">おやすみなさい</li>

        <a class="c-button">ここをクリックすると、色が変わります</a>
        <li class="fruits">りんご</li>
        <li class="fruits">ぶどう</li>
        <li class="fruits">レモン</li>
    </ul>
    <a class="c-button__black">ここをクリックすると、色戻ります</a>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
    <script src="js/script.js"></script>
</body>

</html>

copy

jQueryコード

$(function($) {
    $("ul li").each(function(index, element) {
      if($(this).hasClass("good-morning")) {
       
        console.log(index);
        console.log($(element).text());
        console.log('classが存在だー。');
      } else {
        
        console.log(index);
        console.log($(element).text());
        console.log('classが存在しません。');
      }
    });

});

引数のindexは何番目かを、elementは要素中身を表している。

■「this」は大事。

if($li).hasClassとしていたら…全部「存在しています」、となり混乱。

each(function)はul>liタグとともに使われることが多い、function内を繰り返し実行してくれるもの。function内ifで指定するのは「this」とすればよい。これでli一つずつに対して、hasClassしているか調べてくれることになる。

②2ndSTEP
「activeクラス」をaddClass,removeClassでつけたり外したりする。

    $("a.c-button").click(function(){
      if($(this).hasClass("active")){ //redのクラスがあるかどうかを判定
      $("a.c-button").removeClass("active");
      return false;
      } else {

      $("a.c-button").addClass("active");
      return false;
      }
      });

これはtggleClassを使ってもOK！

$("a.button").click(function(){
 $(this).toggleClass("active");
});

こちらの元に戻るボタンは、押して赤くなったら困るのでtoggleClass不可。removeClassを使う。

      $("a.c-button").click(function(){
        $(this).toggleClass("active");
       });

      $("a.c-button__black").click(function(){
        if($("a.c-button").hasClass("active")){ //redのクラスがあるかどうかを判定

        $("a.c-button").removeClass("active");
        return false;
        } else {
          console.log('何もしません。');
        return false;
        }
        });

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
最後までお読みいただきありがとうございました。
次回はJavaScriputのAddClassについて書きたいと思います。

Aimei