みなさんお世話になっております。
今回はwordpressにjQueryをコピペしただけでは動かない点についてお伺いしたいのです。
javascriptとjQueryに関しては今回初めて仕組みを理解しようとしているところです。
参考サイト:[http://sole-color-blog.com/blog/php/1060/]
こちらの動きを作りたくてコピペしました。
$(function(){ //ボタンがクリックされた時 $("button").cllick(function(){ //一度結果を非表示にする $(".result").hide(); //問題数を取得 var qNum = $("ul li").length; if( $("ul li input:checked").length < qNum ){ //全てチェックしていなかったらアラートを出す alert("未回答の問題があります"); } else { //チェックされているinputの数を取得 var typeANum = $(".typeA:checked").length, typeBNum = $(".typeB:checked").length; if( typeANum > typeBNum ) { //もしもAの方が多かったらAタイプを表示 $(".resultA").fadeIn(); } else if( typeANum < typeBNum ) { //もしもBの方が多かったらBタイプを表示 $(".resultB").fadeIn(); } } }); });
子ページのfunctions.phpにhead内に書き込む部分があったので、そこにいれました。
対処したこと
$(function(){
など、$では既存に組み込まれているjQueryとかぶってしまうため、動かないこと。
//ボタンがクリックされた時 $("button").cllick(function(){ //一度結果を非表示にする $(".result").hide();
この順番では初めから答えが見えてしまっているので、順番を入れ替えたこと。
そして以下のようになりました。
/*-------------------------------------------*/ /* <head>タグ内に自分の追加したいタグを追加する /*-------------------------------------------*/ function add_wp_head_custom(){ ?> <!-- head内に書きたいコード --> <script type="text/javascript" src="http://サイト/wp-content/themes/lightning_child_sample/js/jquery-3.2.1.min.js"></script> <script type="text/javascript"> jQuery(function($){ //一度結果を非表示にする jQuery(".result").hide($); //ボタンがクリックされた時 jQuery("button").click(function($){ //問題数を取得 var qNum = jQuery("ul li").length; if( jQuery("ul li input:checked").length < qNum ){ //全てチェックしていなかったらアラートを出す alert("未回答の問題があります"); } else { //チェックされているinputの数を取得 var typeANum = jQuery(".typeA:checked").length, typeBNum = jQuery(".typeB:checked").length, typeCNum = jQuery(".typeC:checked").length, typeDNum = jQuery(".typeD:checked").length; if( typeANum >= typeBNum && typeANum >= typeCNum && typeANum >= typeDNum ) { //もしもAの方が多かったらAタイプを表示 jQuery(".resultA").fadeIn(); } else if( typeBNum >= typeANum && typeBNum >= typeCNum && typeBNum >= typeDNum ) { //もしもBの方が多かったらBタイプを表示 jQuery(".resultB").fadeIn(); } else if( typeCNum >= typeANum && typeCNum >= typeBNum && typeCNum >= typeDNum ) { //もしもBの方が多かったらBタイプを表示 jQuery(".resultC").fadeIn(); } else if( typeDNum >= typeBNum && typeDNum >= typeCNum && typeDNum >= typeANum ) { //もしもBの方が多かったらBタイプを表示 jQuery(".resultD").fadeIn(); } } }); }); </script> <?php } add_action( 'wp_head', 'add_wp_head_custom',1);
現在の状態
動きはあるようで「未回答の問題があります」とアラートは出てきます。
ただ、全てにチェックしていてもアラートが出ます。
問題数が取得できていないのかと思うのですが、そうなのでしょうか。
Consoleではこう出ています。
お分かりになる方がいらっしゃいましたら、お力添え頂きたくお願い申し上げます。
※追記
大変失礼いたしました!HTML部分を追加いたします。
<div class="question"> <h1>あなたの今日の昼食は?</h1> <ul> <li> <span>Q1. こってりしたものが食べたい</span> <label><input type="radio" name="q01" class="typeB typeC"> YES</label> <label><input type="radio" name="q01" class="typeA typeD"> NO</label> </li> <li> <span>Q2. 時間がないからすぐに食べたい</span> <label><input type="radio" name="q02" class="typeB typeD"> YES</label> <label><input type="radio" name="q02" class="typeA typeC"> NO</label> </li> <li> <span>Q3. お腹が空いたからガッツリ食べたい</span> <label><input type="radio" name="q03" class="typeB typeC"> YES</label> <label><input type="radio" name="q03" class="typeA typeD"> NO</label> </li> <li> <span>Q4. 節約中だから安くおさえたい</span> <label><input type="radio" name="q04" class="typeB typeD"> YES</label> <label><input type="radio" name="q04" class="typeA typeC"> NO</label> </li> <li> <span>Q5. ダイエット中だからヘルシーに済ませたい</span> <label><input type="radio" name="q05" class="typeA typeD"> YES</label> <label><input type="radio" name="q05" class="typeB typeC"> NO</label> </li> </ul> <button>診断する</button> </div> <div class="result resultA"> <h2>あなたにオススメの昼食は...<br><strong>和食</strong></h2> <p>ヘルシーに済ませたいあなたには和食がオススメ!一汁三菜の定食メニューだとなおバランスよし。</p> </div> <div class="result resultB"> <h2>あなたにオススメの昼食は...<br><strong>ファストフード</strong></h2> <p>手軽にお腹を満たしたいあなたにはファストフードがオススメ!牛丼やハンバーガーでお腹を満たしましょう。</p> </div> <div class="result resultC"> <h2>あなたにオススメの昼食は...<br><strong>中華</strong></h2> <p>こってり満腹メニューを食べたいあなたには中華がオススメ!胃もたれが心配なときはウーロン茶を添えて。</p> </div> <div class="result resultD"> <h2>あなたにオススメの昼食は...<br><strong>自炊</strong></h2> <p>安くヘルシーに済ませたいあなたには自炊がオススメ!頑張ってお弁当を作りましょう。</p> </div>
どうぞよろしくお願いいたします!
回答1件
あなたの回答
tips
プレビュー