Показывать сумму динамической цены при нажатии на переключатель в jquery - PullRequest
Новая
       23

Показывать сумму динамической цены при нажатии на переключатель в jquery

2 голосов
/ 22 сентября 2019

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

У меня есть две записи о пассажирах в базе данных.
1) Мэгги
2) Эстер

Цена по умолчанию для каждого пассажира - 125000, и если пользователь нажимает, чтобы выбрать свой тип номера, то цена 150000 для выбранного пассажира.Вот веб-сайт, на котором я подаю заявку: Портная страница веб-сайта

enter image description here

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

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

$(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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...