こんばんは！今日はjs/jQueryで実装する部分があり、その中でtoggleがめちゃ便利だったので備忘録として。
toggleメソッドとは？
toggleメソッドは表示・非表示を切り替える事ができるjQueryの便利なメソッド。hideとshowが合体したメソッド。
js/jQueryでclickイベントを実装したい
実装したい事
①クリックしたら画像部分が表示される
②もう一度クリックしたら画像部分が非表示になる
※ちなみgyazo gifをqittaで表示する方法はでいけます
GyazoでアップロードしたGifアニメーションを簡単に表示する方法。（URLのみでOK）https://qiita.com/Kobutorina_hato/items/d28d4cc90096e058566d
準備
gem 'jquery-rails'を記述
bunde installします
//= require activestorage
//= require turbolinks
//= require_tree .
//= require jquery #追加
//= require jquery_ujs #追加
jQueryのライブラリを読み込ませましょう。JavaScriptの前に記述しないとエラーします
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
これを実行する事でスクリプトファイルの読み込むためにスクリプトファイルを自動的に生成してくれます
うまくいかない
.new-member-registration-form-content__group.whatnumber-text-right
.signup-seqcode-text
%i.fas.fa-question-circle{ style: "color:royalblue;" }
カード裏面の番号とは？
.signup-seqcode-info
classのsignup-seqcode-infoをクリックしたらイベント発火させたい
$(function() {
let btn = document.querySelector(".signup-seqcode-text");
let image = `<div class="signup-seqcode-info is-show">
カードの裏面をご残照下さい。
<img src="//www
://表示したい画像のURL" alt="" width="240">
</div>`
btn.addEventListener("click", function() {
$(".signup-seqcode-info").html(image);
});
});
指定のクラス名.signup-seqcode-textをクリックすると変数imageが.signup-seqcode-info要素の下に表示されるように実装できた。しかし表示はできるがどうすれば非表示にできるか分からない。off()やremove()使ってみたが、動的に出現したhtmlを消す方法がうまくいかず。
toggleメソッドで簡単に実装できた
今日のメインテーマのtoggle登場。色々調べて書いてみて動かなくてを繰り返していたら、toggleメソッドだったら簡単にいけるのではないかと。
.new-member-registration-form-content__group.whatnumber-text-right
.signup-seqcode-text
%i.fas.fa-question-circle{ style: "color:royalblue;" }
カード裏面の番号とは？
.signup-seqcode-info
.signup-seqcode-info.is-show
カードの裏面をご参照下さい
= image_tag "//www://表示したい画像.png?3312594182", alt: "", width: "240"
表示したい文字カードの裏面をご参照下さいと画像部分=image_tagはhamlに書いておく
.signup-seqcode-info.is-showはクリックして動的に追加したDOM要素に与えるクラス
.signup-seqcode-info.is-show {
width: 300px;
display: none;
position: absolute;
top: 6px;
z-index: 1;
padding: 16px;
border-radius: 6px;
background: #eee;
text-align: center;
color: #333;
line-height: 1.5;
img {
padding-top: 10px;
}
}
cssでdisplay:none;にしてデフォルト時は非表示にする
デフォルト時は見えないですが、クリックして出現する時にどこに表示したいかをcssで決めておきましょ。ポイントはz-index: 1;を忘れると他の要素の下に潜り込みますのでご注意を。
$(function() {
$('.signup-seqcode-text').click(function() {
$('.is-show').toggle();
})
});
指定したクラス名.signup-seqcode-textをクリックするとイベント発火
toggleはクリック1回目showイベント発火で.is-show部分が表示される
クリック2回目hideイベントで.is-show部分が非表示になる
↓↓完成形をもう一度↓↓
最初は二回clickイベントを作る必要があると思っていたがtoggleメソッド使えば超短い記述で実装できた
toggleは引数も指定できる
【 対象要素.toggle( ミリ秒 ) 】
◯ミリ秒かけて表示・非表示が行われる
【 対象要素.toggle( ミリ秒, 関数 ) 】
◯ミリ秒かけて表示・非表示をした後に関数を実行する事もできます（これ実装してないので詳しくは割愛）
toggleはアニメーションも設定できる
- 【 fast 】：素早く非表示にする
- 【 slow 】：ゆっくり非表示にする
- 【 swing 】：デフォルトの非表示スタイル
- 【 linear 】：一定の速度で非表示にする
toggle兄弟いろいろ
詳しい説明は省略しますが、「fadeToggle()」,「toggleClass()」,「slideToggle()」はよく使われるいたいです
fadetoggle()はじわーっと表示・非表示にしてくれます
toggleClass()は対象となる要素のclass属性値を追加したり削除したりを繰り返すことが可能なメソッド
slideToggle()は特定の要素を縦方向にアニメーションしながら表示・非表示する事ができます
この辺りはフロント実装で使えそうなので下記サイトを参考に使ってみたいなぁと思います
30分で理解！jQueryのtoggle()と3種のメソッド活用術！
https://www.sejuku.net/blog/40705
まとめ
そういえば以前にもtoggleってなんだろ？ってちょろっと調べた事ありました。ただ実際に動かす機会がないと分かりませんね。js/jQuery苦手なんですけど（他が得意なわけではない笑）、やっぱり見た目の変化が分かりやすいので意図した動きになった時は楽しいです。