条件付きのYES/no チャートを作りたいです!

前提・実現したいこと

プログラミング初心者です。初めて投稿させていただきます。

現在,本を片手にRuby on rails を使用してwebサイトを作成しています。
その中で、Yes/noチャートを作りたいのですがなかなかうまくいかず困っています。
下の図のようなチャートを作りたいです。

・Quetion5までは答えがYesでもNoでも順番に表示する。Quetion5以降はそれまでのの回答のYesが3つ以上ならQuetion6に3つ未満ならQuetion7というふうに分岐したいです。
・スタートはQuetion1だけ表示されており、Quetion2にいくとQuestion1を非表示するという形で順番に表示したいです。

発生している問題・エラーメッセージ

順番に表示するまではできたのですが、分岐のところや、非表示を表示にするなどでつまづいています。下に今できているところまで記載しています。
お力添えを頂戴したいと思います。かじっている言語はRuby,HTML5,CSS3,jqueryですので、これを使ってできないかと思います。

エラーメッセージ

該当のソースコード

<html>

<div id="q1" class="Question1">
   <img  src="Question1.jpg" >
   <a class="btn" href="#q2"><img class="yes1" src="yes.png"></a>
   <a class="btn" href="#q2"><img class="no1" src="no.png"></a>
</div>

<div id="q2" class="Question2">
   <img  src="Question2.jpg" >
   <a class="btn" href="#q3"><img class="yes2" src="yes.png"></a>
   <a class="btn" href="#q3"><img class="no2" src="no.png"></a>
</div>

<div id="q3" class="Question3" >
   <img  src="Question3.jpg" >
   <a class="btn" href="#q4"><img class="yes3" src="yes.png"></a>
   <a class="btn" href="#q4"><img class="no3" src="no.png"></a>
</div>

<div id="q4" class="Question4">
   <img  src="Question4.jpg" >
   <a class="btn" href="#q5"><img class="yes4" src="yes.png"></a>
   <a class="btn" href="#q5"><img class="no4" src="no.png"></a>
</div>

<div id="q5" class="Question5" >
   <img  src="Question5.jpg" >
   <a class="btn" href="#q6"><img class="yes5" src="yes.png"></a>
   <a class="btn" href="#q6"><img class="no5" src="no.png"></a>
</div>

<div id="q6" class="Question6" >
   <img  src="Question6.jpg" >
   <a class="btn" href="#q7"><img class="yes6" src="yes.png"></a>
   <a class="btn" href="#q7"><img class="no6" src="no.png"></a>
</div>

<div id="q7" class="Question2">
   <img  src="Question7.jpg" >
   <a class="btn" href="#q8"><img class="yes7" src="yes.png"></a>
   <a class="btn" href="#q8"><img class="no7" src="no.png"></a>
</div>

<CSS>

.Question1{
 padding-top:150px;
 padding-left:350px;
 position:relative;
}
.yes1{
  position: absolute;
  right:850px;
  top:400px;
}
.no1{
  position: absolute;
  right:650px;
  top:400px;
}
.Question2 {
 padding-top:150px;
 padding-left:350px;
 position:relative;
}
.yes2{
  position: absolute;
  right:850px;
  top:400px;
}
.no2{
  position: absolute;
  right:650px;
  top:400px;
}
.Question3 {
 padding-top:150px;
 padding-left:350px;
 position:relative;
}
.yes3{
  position: absolute;
  right:850px;
  top:400px;
}
.no3{
  position: absolute;
  right:650px;
  top:400px;
}
.Question4 {
 padding-top:150px;
 padding-left:350px;
 position:relative;
}
.yes4{
  position: absolute;
  right:850px;
  top:400px;
}
.no4{
  position: absolute;
  right:650px;
  top:400px;
}
.Question5 {
 padding-top:150px;
 padding-left:350px;
 position:relative;
}
.yes5{
  position: absolute;
  right:850px;
  top:400px;
}
.no5{
  position: absolute;
  right:650px;
  top:400px;
}
.Question6 {
 padding-top:150px;
 padding-left:350px;
 position:relative;
}
.yes6{
  position: absolute;
  right:850px;
  top:400px;
}
.no6{
  position: absolute;
  right:650px;
  top:400px;
}
.Question7 {
 padding-top:150px;
 padding-left:350px;
 position:relative;
}
.yes7{
  position: absolute;
  right:850px;
  top:400px;
}
.no7{
  position: absolute;
  right:650px;
  top:400px;
}

jqueryに関しては以下のコードを参考にしましたが、うまく動きませんでした。

$(function(){
            $("btn").on("click", function() {
               $(this).closest("div").css("display","none");
               id = $(this).attr("href");                          
               $(id).addClass("positionFit").show("fast");
            });
});

ソースコード

試したこと

上記のソースコードまでできました。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

kei344

2019/03/03 03:59

（質問文は編集できます）質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

akintat-2748

2019/03/03 04:35

ありがとうございます。コードブロックで囲みました。

kei344

2019/03/03 04:39

HTML/CSSは分割された別のファイルということでしょうか。そうでないならHTMLのみでコードブロック、CSSのみでコードブロックにしてください。また、jQueryについて、試したことが有るならコードを記載されたほうがよいです。

akintat-2748

2019/03/03 04:54

ありがとうございますコードブロックで囲み直しました。 jqueryに関しては初心者でどのように作成したら良いかわからない状況です。上記のコードを参考に作って見ましたができませんでした。

行動規範の内容に同意します

回答1件

ベストアンサー

btn ではなく .btn ですね。前者はbtn という要素として扱われます。
現状のコードの場合クラスなので.btn です。
（ return false; は現状のコードでは.btnが a要素なので、要素のデフォルト動作を止めるためにつけています）

js
1$(function(){
2         // $("btn").on("click", function() {
3            $(".btn").on("click", function() {
4               $(this).closest("div").css("display","none");
5               id = $(this).attr("href");                          
6               $(id).addClass("positionFit").show("fast");
7               return false;/**/
8            });
9});    
10```**動くサンプル：**[https://jsfiddle.net/y6thrxmz/](https://jsfiddle.net/y6thrxmz/)

投稿2019/03/03 05:05

kei344

総合スコア69400

kei344

2019/03/03 05:09

あとは「クリックしたのがONかOFFか」を判別し、それを変数に格納して、「何番目の質問か」を判断して次に開く要素を決める、という流れです。わからないことを一つずつつぶしていきましょう。

akintat-2748

2019/03/03 09:12

ありがとうございます。だいぶイメージしていたものに近づいてきました。変数に格納する作業はJavaScriptを使って書くということになるでしょうか？どのように書くかの例を教えていただけないでしょうか？　お手数おかけします。

kei344

2019/03/03 09:19

> 変数に格納する作業はJavaScriptを使って書くということになるでしょうか？提示のコード内で完結させるならそうしますね。Rubyで行うことも出来るとは思いますが、Ruby自体私が不勉強なのでよくわかりません。 >例を教えていただけないでしょうか？ご自身でコードを書かれるのが先ですね。JavaScript自体に慣れていないなら、入門書を読んでからトライしましょう。コードがほしいだけなら、そのうち他の回答が付くかもしれませんので、それを待ってみましょう。（土日は回答者も少ないので）【質問するときのヒント｜teratail（テラテイル）】 https://teratail.com/help/question-tips

akintat-2748

2019/03/03 09:39

了解です、ありがとうございます。とても助かりました。一つずつ勉強して、解決して行きたいと思います。

akintat-2748

2019/03/04 10:32

いろいろ詳しく説明していただきありがとうございます。だいぶ、やりたいものに近づいてきました。ベストアンサーにさせていただきました。

行動規範の内容に同意します