プログラミング初心者です。
本を片手に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});
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/03/25 10:21