ホームへ

【jQuery】クリックしたら特定の要素にclass付与する方法

2020年03月18日

「こっちの要素をクリックしたときにあっちの要素を変化させたい!あっち要素にclassさえつけばCSSで調整できるのに!」

という要望を実現できます。

私は地方でWebデザイナーを9年ほどやっているものです。
私も上記のような思いに駆られ、実装したことがあります。

クリックしたら特定の要素にclassをつける方法を紹介します。

結論:jQueryを利用する

残念ながらCSSだけではムリです。jQuery(javascript)を利用します。

とはいっても数行で済みますので簡単です。

下記はAをクリックするとBにclass="C"がつき、背景色が変わります。

A
B

DevToolsを使うとでclass="C"がついたりきえたりするのが確認できます。

html

<div class="A">A</div>
<div class="B">B</div>

CSS

.A,.B{
    background: #CCC;
    padding: 10px;
    margin: 10px;
}
.A{
    cursor: pointer;
}
.C{
    background: green;
}

jQuery

<script src="https://code.jquery.com/jquery.min.js"></script>
<script>
$(function() {
    $(".A").click(function() {
        $(".B").toggleClass("C");
    });
});
</script>

CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。

↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓

↑「副業してもう少し稼ぎたい!」というかたのために副業の方法も解説しています。

jQueryの書き方解説

jQueryファイルを読み込ませる

<script src="https://code.jquery.com/jquery.min.js"></script>

まずhtml内でjQueryファイルを読み込みます。

ここでは「https://code.jquery.com/」サイトから読み込んでいますが、jsファイルを右クリックからダウンロードして自分のサーバに置いても大丈夫です。

jQueryファイルを読み込ませたにjQueryを書きます。順番が重要です。

jQueryファイルを読み込ませる行の前にjQueryを書くと動きません。

また、jQueryファイルが古いバージョンのときも動かない場合があります。

次にjQueryを書きます。

jQueryは例ではhtml内に直書きしていますが、別ファイルにしてもかまいません。

別ファイルにする場合、その別ファイル内には<script>タグは不要になるので注意しましょう。

クリックしたら特定の要素のclassを変化させる方法

下記jQueryのソースについて解説します。

$(".A").click(function() {
    $(".B").toggleClass("C");
});

「$(".A").click」は動作条件であり「class="A" がクリックされたとき」という意味です。

このかっこ内にクリックされるボタンを指定しましょう。

このかっこ内はCSSセレクタを指定できます。

指定例

  • $(".A").click
  • $("#A").click
  • $("ul.A>li").click
  • $("ul.A>li:nth-of-type(2n+1)").click
  • $("div::after").click
    などなど・・・

「$(".B")」は動作対象です。

このかっこ内に変化させたい(クラスをつけたい)対象を指定しましょう。

このかっこ内はCSSセレクタ を指定できます。

クリックした要素自身を対象にする場合は「$(this)」と指定します。「""」は不要です。

「.toggleClass("C")」は動作内容であり、対象に対して「class="C"がなければ追加し、あれば消す」という意味です。「class="C"をつけたりはずしたりする」というとわかりやすいでしょうか。

ページ内にあるすべてのclass="B"がいっせいに変化します。

("C") の「C」はclass名です。つけたいclass名を自由に設定しましょう。

toggleClassが効かないとき

以下は間違った例です。
記号があるかないかで動かなくなるので注意です。

NG例

  • toggleClass("C")
  • .toggleClass(C)
  • .toggleClass(".C")

実践と確認

以上を踏まえて、まずはコピペで自分のサイトに貼り付けましょう。それから()内を自分の実現したい内容に合わせて変更しましょう。

次に動いたかどうか確認しましょう。ローカル環境でも確認できます。
DevToolsでclassがついたか確認できます。

後はCSSのほうをいじるだけです。

以上、クリックしたら特定の要素にclassをつける方法でした。

「この記事の内容がよくわからなかった…」「なんかうまくいかなかった…」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。
わからないまま突き進むより基本を学ぶのが結局近道です。

CSSやhtmlをマンガで学ぶ