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

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

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

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

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

jQuery

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

2回答

3954閲覧

Yes/no診断 3つ以上yesなら〜という条件分岐を行いたい。

akintat-2748

総合スコア25

Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

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

jQuery

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2019/03/22 23:23

編集2019/03/22 23:45

プログラミング初心者です。

本を片手にRuby on rails を使用してwebサイトを作成しています。
今、Yes/noチャートを作っていますが、条件分岐のところでつまづいています。

図のようなものを作っています。

イメージ説明

・Quetion5で、Quetion1〜5の回答のYesが3つ以上ならQuetion6に3つ未満なら他のリンクページにジャンプするという形にしたいです。

javascriptを使って、各Quetionで回答がyesの場合は変数を定義し、「2」を格納しました。
Quetion5で定義した変数のtotalが6以上ならQuetion6に、6未満ならリンク先にジャンプ、と考えて一度書いて見ましたが、うまく行きません。

初心者ですので、もしかするとかなり的外れなことをしているのかもしれません。

お力添えを頂戴したいと思います。

HTML

1<div id="q1" class="Question1" style="display: none;"> 2 <img src="Question1.jpg" > 3 <a class="btn_yes" href="#q2"><img class="yes1" src="yes.png"></a> 4 <a class="btn_no" href="#q2"><img class="no1" src="no.png"></a> 5</div> 6 7<div id="q2" class="Question2" style="display: none;"> 8 <img src="Question2.jpg" > 9 <a class="btn_yes" href="#q3"><img class="yes2" src="yes.png"></a> 10 <a class="btn_no" href="#q3"><img class="no2" src="no.png"></a> 11</div> 12 13<div id="q3" class="Question3" style="display: none;"> 14 <img src="Question3.jpg" > 15 <a class="btn_yes" href="#q4"><img class="yes3" src="yes.png"></a> 16 <a class="btn_no" href="#q4"><img class="no3" src="no.png"></a> 17</div> 18 19<div id="q4" class="Question4"style="display: none;"> 20 <img src="Question4.jpg" > 21 <a class="btn_yes" href="#q5"><img class="yes4" src="yes.png"></a> 22 <a class="btn_no" href="#q5"><img class="no4" src="no.png"></a> 23</div> 24 25<div id="q5" class="Question5"style="display: none;" > 26 <img src="Question5.jpg" > 27 <a class="btn_yes" href="#q6"><img class="yes5" src="yes.png"></a> 28 <a class="btn_no" href="#q6"><img class="no5" src="no.png"></a> 29</div> 30 31<div id="q6" class="Question6"style="display: none;" > 32 <img src="Question6.jpg" > 33 <a class="btn_yes" href="#q7"><img class="yes6" src="yes.png"></a> 34 <a class="btn_no" href="#q7"><img class="no6" src="no.png"></a> 35</div>

javascript

1$(function(){ 2 $(".btn_yes").on("click", function() { 3 $(this).closest("div").css("display","none"); 4 var idd= $(this).attr("id"); 5 switch (idd){ 6 case"q1": 7 var bunki1=2 8 break; 9 case"q2": 10 var bunki2=2 11 break; 12 case"q3": 13 var bunki3=2 14 break; 15 case"q4": 16 var bunki4=2 17 break; 18 case"q5": 19 var bunki5=2 20 var total =bunki1 + bunki2 + bunki3 + bunki4 + bunki5 21 if(total>6) 22 location.href = "/"; 23 break; 24 default:bunki=0 25 } 26 id = $(this).attr("href"); 27 $(id).show(); 28 return false;/**/ 29 }); 30 31 $(".btn_no").on("click", function() { 32 $(this).closest("div").css("display","none"); 33 var idd= $(this).attr("id"); 34 switch (idd){ 35 case"q5": 36 var total =bunki1 + bunki2 + bunki3 + bunki4 + bunki5 37 if(total>6) 38 location.href = "/"; 39 break; 40 default:bunki=0 41 } 42 id = $(this).attr("href"); 43 $(id).show(); 44 return false;/**/ 45 }); 46});

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

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

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

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

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

guest

回答2

0

解決してますが、質問コードを動くようにすると↓こういう感じかなと。
解決すべき問題だったのは、iddがそもそも取れてないのと、変数のスコープ。

javascript

1var bunki1 = 0; 2var bunki2 = 0; 3var bunki3 = 0; 4var bunki4 = 0; 5var bunki5 = 0; 6$(function(){ 7 $(".btn_yes").on("click", function() { 8 $(this).closest("div").css("display","none"); 9 var idd= $(this).closest("div").css("display","none").attr("id"); 10 switch (idd){ 11 case"q1": 12 bunki1=2 13 break; 14 case"q2": 15 bunki2=2 16 break; 17 case"q3": 18 bunki3=2 19 break; 20 case"q4": 21 bunki4=2 22 break; 23 case"q5": 24 bunki5=2 25 var total =bunki1 + bunki2 + bunki3 + bunki4 + bunki5 26 if(total>6) 27 location.href = "/"; 28 break; 29 default:bunki=0 30 } 31 id = $(this).attr("href"); 32 $(id).show(); 33 return false;/**/ 34 }); 35 36 $(".btn_no").on("click", function() { 37 $(this).closest("div").css("display","none"); 38 var idd= $(this).closest("div").css("display","none").attr("id"); 39 switch (idd){ 40 case"q5": 41 var total = bunki1 + bunki2 + bunki3 + bunki4 + bunki5 42 if(total>6) 43 location.href = "/"; 44 break; 45 default:bunki=0 46 } 47 id = $(this).attr("href"); 48 $(id).show(); 49 return false;/**/ 50 }); 51});

投稿2019/03/25 02:24

papinianus

総合スコア12705

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

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

akintat-2748

2019/03/25 10:21

ご丁寧にありがとうございます。具体的なご指摘は、素人なのでとても参考になり勉強になります。参考にさせていただきました。
guest

0

ベストアンサー

Yesの数を格納する変数を定義しといて、初期値を0として、Yesの場合はその変数を+1していけばどうでしょう。
それが3以上の場合になんかすればいいというはなしで。

投稿2019/03/22 23:54

y_waiwai

総合スコア87719

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

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

akintat-2748

2019/03/23 09:59

ありがとうございます。yesの数を定義してやった結果、無事にできました。ありがとうございます。ベストアンサーにさせていただきました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問