66816


### 前提・実現したいこと

開始時間と終了時間の入力をさせ、その差分によって金額を表示するフォームを作成しています。  
railsとjQueryを使用しており、機能は以下のようなものです。  
・タブ切り替えができる  
・どのタブも同じ内容の計算フォームが表示される  
・タブごとに時間入力でき、計算結果を表示させることができる

なお、計算フォームは部分テンプレートで切り出しています。

[![画像の説明をここに入力](https://i.stack.imgur.com/4DQ8h.png)](https://i.stack.imgur.com/4DQ8h.png)  
[![画像の説明をここに入力](https://i.stack.imgur.com/baKI4.png)](https://i.stack.imgur.com/baKI4.png)

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

それぞれのタブを、タブ①・タブ②・タブ③とすると、  
タブ①のフォームで入力した数値は、うまく計算されて結果が表示されます。  
しかし、その結果はタブ②・タブ③にも同じく表示されてしまい、タブ②で新しく計算することができません・

本来はタブごとに計算できるようにしたいので、困っています。

### 該当のソースコード

[code]

    //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;
      });
    });
    
[/code]

### 試したこと

jsのクリックアクションで、ボタンと結果の表示箇所をidごとに別にすればいいのかなと考えています。  
ただ、その記述の仕方やタブを切り替えたときの反映のさせ方がよくわからず、うまくいきませんでした。

初心者で、あまり質問もうまくないのですが、何卒ご協力よろしくお願いします。


CC BY-SA 4.0
2020-05-19T11:21:15.703
66773
2020-05-20T09:58:59.567
2020-05-20T00:52:58.957
40024
40024
question
javascript ruby-on-rails jquery css html5
タブごとに別の計算結果を表示させたい


jQueryの使い方に誤りがあります。  
`$('button').click`の中で`$('.adult-
price').text('0円')`のような記述がありますが、これだとページ上に存在する全ての`.adult-
price`のtextを更新してしまうことになります。  
（たとえ非表示であっても）

$(xxxx)とやると、ページ上の全てのxxxを取得して一括（あるいは１件目のみ）に対して操作することになります。このあたりはjQueryの入門記事などを参考にされたほうがよいと思います。

対応方法は色々あると思いますが、以下コード例のように、押されたbuttonの属するform内でのみ計算・結果を更新してやれば望んでいる結果になるかと思います。

[code]

    $('button').click(function(e) {
      e.preventDefault();
      
      // ↓これだとどの計算ボタンを押しても全ての答えを１行目の答えで更新してしまう
      // var answer = $('.a').val() * $('.b').val();
      // $('.answer').text(answer);
      
      // 押されたボタンの属するformを取得して、そのform内の要素のみを使用するようにする
      var $form = $(e.currentTarget).parents('form');
      var answer = $form.find('.a').val() * $form.find('.b').val();
      $form.find('.answer').text(answer);
    });
[/code]

[code]

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <form>
      <input type="number" class="a" value="1">
      x
      <input type="number" class="b" value="2">
      =
      <span class="answer">???</span>
      <button>計算</button>
    </form>
    <hr>
    <form>
      <input type="number" class="a" value="2">
      x
      <input type="number" class="b" value="3">
      =
      <span class="answer">???</span>
      <button>計算</button>
    </form>
    <hr>
    <form>
      <input type="number" class="a" value="3">
      x
      <input type="number" class="b" value="4">
      =
      <span class="answer">???</span>
      <button>計算</button>
    </form>
[/code]


CC BY-SA 4.0
2020-05-20T09:58:59.567
66816
2020-05-20T09:58:59.567
9608
66773
answer