【jQuery】クリックしたら特定の要素にclass付与する方法
【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の基本を学びましょう。
わからないまま突き進むより基本を学ぶのが結局近道です。