質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

505閲覧

wordpressでjQueryを使ったyes/no選択チャートを作りたい

sai_to

総合スコア20

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2017/07/03 08:41

編集2017/07/03 09:57

みなさんお世話になっております。

今回は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>

どうぞよろしくお願いいたします!

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2017/07/03 09:52

HTML部分を提示ください。
guest

回答1

0

ベストアンサー

JavaScript

1// jQuery("ul li").length; 2// ↓ 3 jQuery(".question ul li").length;

とりあえず取得するli要素を適切に限定してみてはいかがでしょうか。(上記セレクタ以外もおなじく限定したほうが良いでしょう)

投稿2017/07/03 10:05

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

sai_to

2017/07/04 02:45

kei344さん 早速のご回答をありがとうございます! 実行したところ、結果が表示されました! 一度結果が出たあとで、立て続けに選択しボタンを押すと1回目の結果と2回目の結果のどちらも表示されました。 この場合、2回目の結果のみ表示したいのですが、リセットするような処理を行うのでしょうか?
kei344

2017/07/04 02:53

> リセットするような処理を行うのでしょうか? そうなります。 jQuery(".result").hide(); をクリックイベントの最初にも追加すればよいと思います。 sai_toさんのコードでは jQuery(".result").hide($); と「$」を引数に渡されていますが、.hide()にjQueryオブジェクトを渡す意味がありませんので、一度仕様を確認してみてください。 【.hide() | jQuery API Documentation】 http://api.jquery.com/hide/
sai_to

2017/07/04 04:58

kei344さん >jQuery(".result").hide(); をクリックイベントの最初にも追加 を行い、.hide($)を.hide()にしたところ、完璧に動きました! これを機にjQuery、javascriptを理解していきたいと思います。 的確なご対応に助けていただきました。 本当にありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問