前提・実現したいこと
開始時間と終了時間の入力をさせ、その差分によって金額を表示するフォームを作成しています。
railsとjQueryを使用しており、機能は以下のようなものです。
・タブ切り替えができる
・どのタブも同じ内容の計算フォームが表示される
・タブごとに時間入力でき、計算結果を表示させることができる
なお、計算フォームは部分テンプレートで切り出しています。
発生している問題・エラーメッセージ
それぞれのタブを、タブ①・タブ②・タブ③とすると、
タブ①のフォームで入力した数値は、うまく計算されて結果が表示されます。
しかし、その結果はタブ②・タブ③にも同じく表示されてしまい、タブ②で新しく計算することができません・
本来はタブごとに計算できるようにしたいので、困っています。
該当のソースコード
//html
<ul class="tabmenu">
<li class="tab-btn active"><a href="#1">タブ①</a></li>
<li class="tab-btn"><a href="#2">タブ②</a></li>
<li class="tab-btn"><a href="#3">タブ③</a></li>
</ul>
<ul class="contents">
<li class="content show" id="1"><%= render partial:'form'%></li>
<li class="content" id="2"><%= render partial:'form'%></li>
<li class="content" id="3"><%= render partial:'form'%></li>
</ul>
//部分テンプレート _form
<span class="jikan">
<form>
<dl>
<dt>開始時間</dt>
<dd><input type="time" name="start_time" value="11:00"autofocus="true" required></dd>
<dt>終了時間</dt>
<dd><input type="time" name="last_time" value="11:00" required></dd>
</dl>
<button type="submit">計算</button>
</form>
</span>
<span class="price">
<p class="adult-price" ></p>
<p class="student-price"></p>
</span>
$(function() {
$('button').click(function(){
//時間計算処理 時間差を変数xに代入しています
・
・
if (x<=0){
$('.adult-price').text('0円');
$('.student-price').text('0円');
}
else if (x<=30){
$('.adult-price').text('330円');
$('.student-price').text('330円');
}
//以下省略
});
//タブ切り替えの記述
$(".tabmenu a").click(function() { //tabmenuクラスのクリックイベント
$(this).parent().addClass("active").siblings(".active").removeClass("active"); //activeくラスを加え、同階層のactiveクラスを削除
var tabContents = $(this).attr("href"); //hrefのidを取得
$(tabContents).addClass("show").siblings(".show").removeClass("show"); //showくラスを加え、同階層のshowクラスを削除
return false;
});
});
試したこと
jsのクリックアクションで、ボタンと結果の表示箇所をidごとに別にすればいいのかなと考えています。
ただ、その記述の仕方やタブを切り替えたときの反映のさせ方がよくわからず、うまくいきませんでした。
初心者で、あまり質問もうまくないのですが、何卒ご協力よろしくお願いします。