Показывать сумму динамического элемента радиовхода. Оно также должно отображаться при нажатии на другой элемент радиовхода.

Question

Я работаю над проектом, в котором я хочу показать общую стоимость соответственно, когда путешественник выбрал дополнительный номер.

Это легко сделать, когда число путешественников статично, но все данные поступают из базы данных. Так что ниже в коде я упоминаю статическую версию формы.

Вот полный код, пожалуйста, помогите мне, потому что я не могу понять проблему:

$(document).ready(function(){

    
              $('#extraRoomInput_m1').click(function(){
          $('#passanger-1').html("<div class='row px-2 mt-2'><div class='col-md-6'>Maggie (Own Room) </div><div class='col-md-6 text-right'>INR <i class='fa fa-inr pl-1'></i> <span id='priceOwnRoom'> 150000.00</span></div></div>");
        });
        $('#extraRoomInput_f1').click(function(){
          $('#passanger-1').html("<div class='row px-2 mt-2'><div class='col-md-6'>Maggie (Twin Room) </div><div class='col-md-6 text-right'>INR <i class='fa fa-inr pl-1'></i> <span id='priceTwinRoom'>125000.00</span></div></div>");
        });

        var extraRoom1 = $("input[name='extraRoom356a192b7913b04c54574d18c28d46e6395428ab']").val();

        var res = parseInt(extraRoom1);
        res = res+parseInt(extraRoom1);

              $('#extraRoomInput_m2').click(function(){
          $('#passanger-2').html("<div class='row px-2 mt-2'><div class='col-md-6'>Esther (Own Room) </div><div class='col-md-6 text-right'>INR <i class='fa fa-inr pl-1'></i> <span id='priceOwnRoom'> 150000.00</span></div></div>");
        });
        $('#extraRoomInput_f2').click(function(){
          $('#passanger-2').html("<div class='row px-2 mt-2'><div class='col-md-6'>Esther (Twin Room) </div><div class='col-md-6 text-right'>INR <i class='fa fa-inr pl-1'></i> <span id='priceTwinRoom'>125000.00</span></div></div>");
        });

        var extraRoom2 = $("input[name='extraRoomda4b9237bacccdf19c0760cab7aec4a8359010b0']").val();

        var res = parseInt(extraRoom2);
        res = res+parseInt(extraRoom2);

            // alert(res);
      $('#total_price').html(res);
      
});

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container-fluid mt-4" id="p-1">
  <h3 class="mb-1">
    <i class="fa fa-bed fa-fw"></i>
    Maggie's room type
  </h3>
  <p>Maggie would you like your own room?</p>

  <div class="row mb-5">
    <div class="col-md-6">
      <label class="w-100">
        <div class="jumbotron style-04 m-2 checkRadioBtn py-3" style="min-height:28vh;cursor:pointer;">
          <div class="text-center">
            <input type="radio" class="extraRoomOption_m" name="extraRoom356a192b7913b04c54574d18c28d46e6395428ab" id="extraRoomInput_m1" value="150000">
            <p><b>Yes please</b></p>
            <p>INR <i class="fa fa-inr pl-3"></i> 150000.00  (per person)</p>
            <p>You will have your own room</p>
          </div>
        </div>
      </label>
    </div>
    <div class="col-md-6">
      <label class="w-100">
        <div class="jumbotron style-04 m-2 checkRadioBtn py-3" style="min-height:28vh;cursor:pointer;">
          <div class="text-center">
            <input type="radio" class="extraRoomOption_f" name="extraRoom356a192b7913b04c54574d18c28d46e6395428ab" id="extraRoomInput_f1" value="125000" checked="">
            <p><b>No thanks</b></p>
            <p>INR <i class="fa fa-inr pl-3"></i> 125000.00 (per person)</p>
            <p>You will share a room with another traveller of the same gender</p>
          </div>
        </div>
      </label>
    </div>
  </div>

  <h3 class="mb-1">
    <i class="fa fa-bed fa-fw"></i>
    Esther's room type
  </h3>
  <p>Esther would you like your own room?</p>

  <div class="row mb-5">
    <div class="col-md-6">
      <label class="w-100">
        <div class="jumbotron style-04 m-2 checkRadioBtn py-3" style="min-height:28vh;cursor:pointer;">
          <div class="text-center">
            <input type="radio" class="extraRoomOption_m" name="extraRoomda4b9237bacccdf19c0760cab7aec4a8359010b0" id="extraRoomInput_m2" value="150000">
            <p><b>Yes please</b></p>
            <p>INR <i class="fa fa-inr pl-3"></i> 150000.00  (per person)</p>
            <p>You will have your own room</p>
          </div>
        </div>
      </label>
    </div>
    <div class="col-md-6">
      <label class="w-100">
        <div class="jumbotron style-04 m-2 checkRadioBtn py-3" style="min-height:28vh;cursor:pointer;">
          <div class="text-center">
            <input type="radio" class="extraRoomOption_f" name="extraRoomda4b9237bacccdf19c0760cab7aec4a8359010b0" id="extraRoomInput_f2" value="125000" checked="">
            <p><b>No thanks</b></p>
            <p>INR <i class="fa fa-inr pl-3"></i> 125000.00 (per person)</p>
            <p>You will share a room with another traveller of the same gender</p>
          </div>
        </div>
      </label>
    </div>
  </div>

 </div>


<div class="card">
  <a class="card-link" data-toggle="collapse" href="#tripInformation">
    <div class="card-header text-dark fs-20">
      Classic Golden Triangle (CGT)
    </div>
  </a>

  <div id="tripInformation" class="collapse show" data-parent="#tripAccordation">
    <div class="card-body p-0">
      <ul class="list-group border-0">
        <li class="list-group-item header-bg-dull border-0 px-2">
          <div class="row">
            <div class="col-md-4 font-weight-bold"><i class="fa fa-fw fa-clock-o"></i> Duration</div>
            <div class="col-md-8">6 Nights/7 Days</div>
          </div>
        </li>
        <li class="list-group-item header-bg-dull border-0 px-2">
          <div class="row">
            <div class="col-md-4 font-weight-bold"><i class="fa fa-fw fa-map-pin"></i> Start</div>
            <div class="col-md-8">NEW DELHI, DELHI</div>
          </div>
        </li>
        <li class="list-group-item header-bg-dull border-0 px-2">
          <div class="row">
            <div class="col-md-4 font-weight-bold"><i class="fa fa-fw fa-map-marker"></i> Finish</div>
            <div class="col-md-8">NEW DELHI, DELHI</div>
          </div>
        </li>

        <li class="list-group-item header-bg-dull border-0 px-2">
          <div class="row">
            <div class="col-md-4 font-weight-bold"><i class="fa fa-fw fa-users"></i> Passengers</div>
            <div class="col-md-8">
               <p>
                  <i class="fa fa-fw fa-male"></i>                                     Maggie Clarke Schwartz
               </p>
               <p>
                  <i class="fa fa-fw fa-female"></i>                                     Esther Ball Clayton
               </p>
           </div>
          </div>
        </li>
        <li class="list-group-item header-bg-dull border-0 px-2">
          <div class="row">
            <div class="col-md-4 font-weight-bold"><i class="fa fa-fw fa-bed"></i> Room type</div>
            <div class="col-md-8 text-right">
              <span class="font-weight-bold">
                <i class="fa fa-inr"></i> Price (per person)
              </span>
            </div>
          </div>
          <div class="row">
            <div class="col-md-12">
                                                <div id="passanger-1"><div class="row px-2 mt-2"><div class="col-md-6">Maggie (Own Room) </div><div class="col-md-6 text-right">INR <i class="fa fa-inr pl-1"></i> <span id="priceOwnRoom"> 150000.00</span></div></div></div>
                                                <div id="passanger-2">
                  <div class="row px-2 mt-2">
                    <div class="col-md-6">
                      Esther (Twin Room)
                    </div>
                    <div class="col-md-6 text-right">
                      INR <i class="fa fa-inr pl-1"></i>
                      <span id="priceTwinRoom">
                        125000.00                                        </span>
                    </div>
                  </div>
                </div>
                                            </div>
          </div>
        </li>

        <li class="list-group-item active border-0 px-2 fs-20">
          <div class="row">
            <div class="col-md-4 font-weight-bold">
              <i class="fa fa-fw fa-inr"></i> Price
            </div>
            <div class="col-md-8 text-right">
              <i class="fa fa-inr"></i>
              <span id="total_price">300000</span>
               (per person)
             </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 1

Я не посмотрел весь код, но вы, кажется, настраиваете обработчики событий для кнопок.Это асинхронное действие, которое срабатывает при нажатии кнопки.Тем не менее, ваша общая цена не требует проведения мероприятия, поэтому не пострадает.Вам необходимо поместить расчет общей цены в функцию обратного вызова события.Это распространенная ошибка Javascript, потому что асинхронную природу сложно понять.В Интернете есть много материала, объясняющего это - убедитесь, что вы понимаете концепции и не пытаетесь вырезать и вставлять код

Во втором расчете res вместо этого вы перезаписываете значение res, рассчитанное для дополнительной комнаты1.сложения значений вместе.Чтобы сделать это более понятным, назовите первое res как-то как extraRoom1Total, а второе extraRoom2Total, а затем сложите их вместе.Это облегчит понимание кода и, следовательно, его будет легче отлаживать и поддерживать