以前から、Wordpressのお問い合わせフォームはContact Form 7を使っていましたが、確認画面と完了画面の都合でMW WP Form をいじることになったついでに気になったことをメモ。
久しぶりのjQueryに頭が…ウッ…。
ラジオボタンを押すと質問内容が変わるようにする
いわゆる「ラジオボタンを押すとドロップダウンで表示」というもの。
世間には2つのラジオボタンで表示/非表示というソースは多く落ちていましたが、3つのものはあまりなかったので2種類作ってみました。
1つ目は、JavaScriptとラジオボタンの配列を利用したもの。
See the Pen ラジオボタンでドロップダウン1(onclick&配列) by mp-webmagic (@mp-webmagic) on CodePen.0
2つ目は、jQueryでラジオボタンのidを利用したもの。
See the Pen ラジオボタンでドロップダウン2(prop&id) by mp-webmagic (@mp-webmagic) on CodePen.0
両方とも表示/非表示はCSSのdisplayで切り替えていて同じです。
それぞれの良いところと悪いところを見ていきます。
例1)JavaScriptとラジオボタンの配列を利用した場合
See the Pen ラジオボタンでドロップダウン1(onclick&配列) by mp-webmagic (@mp-webmagic) on CodePen.0
メリット
- jQueryを参照しなくて済む
- $を使わないので、そのまま貼り付けてもWordpress上でエラーにならない
※WordpressでjQuery使うときは”$”を”jQuery”に書き直す必要がある
デメリット
- それぞれのinputタグの中にonclickをいちいち追加しなければいけない。
- document.getElementByIdが多くなり文字数が画面を圧迫する
- 慣れていないと、配列を[0]からではなく[1]から書いてしまう可能性
仕組み
ラジオボタンのどれが選択されているか?ではなく「このボタンが押されたら(onclick)」が起点になるので、りんごを選択していてもりんごを押せば一応if文が走るはず…。
ボタンを押す→JavaScriptが動く→if文でどのボタンがselected状態かを判定→CSSを書き換え。
配列は0から始まるので123ではなく012になります。
例2)jQueryでラジオボタンのidを利用した場合
See the Pen ラジオボタンでドロップダウン2(prop&id) by mp-webmagic (@mp-webmagic) on CodePen.0
メリット
- 見た目がすっきりしている。短い。
- id名は自分でつけるので、配列と違って名前を間違えにくい
デメリット
- WordPress上で動かすときは”$”を”jQuery”に書き直す必要がある…。
- 別途jQueryを参照しなければいけない。
仕組み
ボタンを押したら…ではなく、「ラジオボタンの内容が変更されたら(change)」が起点になる。
なので、既にりんごを選択している状態でりんごを押しても動作しない。
選択内容が変わる→jQueryが動く→if文でどのボタンがselected状態かを判定→CSSを書き換え。
CSS(display)切り替えについて
今回は基本のCSSで display:none; (非表示)にしておき、
1 2 3 |
#fruits1,#fruits2{ display:none } |
JavaScriptでは、document.getElementById(‘#ID名’).style.display=”block”; で表示にします。
1 2 |
document.getElementById('fruits1').style.display = "none"; document.getElementById('fruits2').style.display = "block"; |
jQueryでは、$(‘#ID名’).css(‘display’,’block’); で表示にします。
1 2 |
$('#fruits3').css('display','block'); $('#fruits4').css('display','none'); |
id名は#ですが、.でクラス名でもOKです。
jQueryの方なら、ちょっと書き換えるだけでfadeでも動きます。
1 2 |
$('#fruits3').fadeIn(); $('#fruits4').fadeOut(); |
おわりに(jQueryが動かない時は…)
疲れているときにjQuery書いて、おかしいなあ動かないなあと思うじゃないですか。
後で見返したら、「$(function(){} で囲んでなかった(=readyイベントがなかった)」。そりゃ動かないわ。。
1 2 3 4 5 6 7 8 9 |
//間違っているコード $('[name="fruits2"]:radio').change( function() { //……中略…… }); //正しいコード $(function() { $('[name="fruits2"]:radio').change( function() { //……中略…… }); }); |
html内の要素を操作する時にはreadyイベントの仕組みを利用しなければなりません。
readyじゃなくて無名関数($(function(){} )でできるから付けた気になっていた。
さらに、無名関数と似てるからカプセル化もしていなかった。
WordPressでjQueryを使いたいのに動かない時は、「jQuery(function($){ });」で前後を囲んでカプセル化してやれば簡単です。
これで囲むと、その中では「$」が使えますので、サンプルコードもそのままコピーすれば動きます。カプセル化した中には普通のjQueryの書き方でOKです。特に修正は必要ありません。
するとつまり……
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
//間違っているコード $('[name="fruits2"]:radio').change( function() { //……中略…… }); //正しいコード jQuery( function( $ ) { //カプセル化 $(function() { //readyイベント $('[name="fruits2"]:radio').change( function() { //……中略…… }); //↑readyイベントここまで }); //↑カプセル化ここまで } ); |
になる…はず……。
JavaScript系も閉じてないよ警告だしてくれるエディタがほしいな…。.netをVisual Studioでやってた頃がちょっと懐かしい。
※続きの記事はこちら!!
【WordPress】「MW WP Form」のラジオボタンを工夫
先日がんばってラジオボタン作りましたがMW WP Form上で動かなかったので、今度はvalueを取得して分岐するタイプを作ってみました…!笑