显示动态无线电输入元素的总和，并且在单击另一个无线电输入元素时也应显示 [英] Show sum of dynamic radio input element and It should also show when click on another radio input element
问题描述
我正在研究一个项目，当旅客选择额外的房间选项时，我想相应地显示总价.
I'm working on a project where I want to show total price accordingly when extra room option selected by the traveler.
当旅客人数固定但所有 数据来自数据库.因此，在下面的代码中，我提到了表单的静态版本.
It is easy to do when the number of travelers is static but all the data come from the database. So below in the code I mention the static version of the form.
这里是完整的代码，请帮助我，因为我无法找出问题所在:
Here are the complete code, Please help me because I'm unable to figure it out the issue:
$(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>
推荐答案
我没有看完所有代码，但是您似乎正在为按钮设置事件处理程序.这是一个异步操作，当按下按钮时将触发此操作.但是，您的总价不希望事件触发，因此不会受到影响.您需要将总价格计算放入事件的回调函数中.这是一个常见的Javascript错误，因为异步特性很难理解.网络上有很多材料可以解释这一点-确保您了解概念并且不要尝试剪切和粘贴代码
I haven't looked at all the code, but you seem to be setting up event handlers for the buttons. This is an asynchronous action that will fire when the button is pressed. However your total price is not wanting for the event to fire so won't be affected. You need to put the total price calculation in the callback function of the event. This is a common Javascript mistake because the asynchronous nature is tricky to understand. There is lots of material on the web to explain this - make sure you understand the concepts and don't try to cut and paste code
在第二个res计算中，您将覆盖为多余的room1计算的res值，而不是将这些值加在一起.为了使其更清楚，将第一个res命名为extraRoom1Total，将第二个extraRoom2Total命名，然后将它们添加在一起.这将使代码更易于理解，从而更易于调试和维护
In the second res calculation you are overwriting the res value calculated for extra room1 instead of adding the values together. To make it clearer, call the first res something like extraRoom1Total and the second extraRoom2Total and then add them together. This will make the code easier to understand and therefore easier to debug and maintain
这篇关于显示动态无线电输入元素的总和，并且在单击另一个无线电输入元素时也应显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
