javascript - Javascript 选项和单选价值价格计算
问题描述
有单选按钮和多选选项。他们的数据价值部分有价格。例如:数据值 = "3.10"。我想做的就是这个。在屏幕上打印所选数据的总和。我希望我能告诉。
这两个选项给出不同的总价格。我想把两者加起来。
$(document).ready(function() {
var price = 10.09;
var net_fiyat=0;
$('input[type=radio]').on('click',function(){
data= $(this).data('price');
net_fiyat = (parseFloat(price) + parseFloat(data));
console.log(price,data);
console.log(net_fiyat);
$('#total').text(net_fiyat);
});
$(".ekstra").change(function(event) {
var total = 0;
$(".ekstra").select().find(":selected").each(function() {
console.log(this,price);
total += parseFloat($(this).data("price"));
});
if (total == 0) {
$('#total').html('');
} else {
var net_fiyat2 = price + total;
console.log('net2');
$('#total').html(net_fiyat2.toFixed(2));
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-12">
<div class="container">
<div class="row">
<div class="col-md-12 pd-40">
<select multiple data-placeholder="Ekstra Malzeme Seçin.." class="ekstra">
<option data-price="1.10">Pizza Sos</option>
<option data-price="1.10">Beyaz Peynir</option>
<option data-price="1.10">Mozarella Peyniri</option>
<option data-price="1.10">Sucuk</option>
<option data-price="1.10">Sosis</option>
</select>
</div>
</div>
</div>
</div>
<input class="radio-button" type="radio" name="radio" data-price="5.12" />
<input class="radio-button" type="radio" name="radio" data-price="6.50" />
<span class="font-size-27 font-weight-bolds ml-1" id="total">$10.09</span>
解决方案
您可以有一个变量来计算所有选定的 Ekstras 和一个用于无线电选择价格的变量。然后创建一个打印总结果的函数。
运行代码片段
$(document).ready(function() {
var price = 0;
var ekstras = 0;
$('input[type=radio]').on('click',function(){
price = parseFloat($(this).data('price'));
printTotal();
});
$(".ekstra").change(function(event) {
ekstras = 0;
$(".ekstra").find(":selected").each(function() {
ekstras += parseFloat($(this).data("price"));
});
printTotal();
});
// Function to print the total
function printTotal() {
var total = ekstras + price;
if (total == 0) {
$('#total').text('');
} else {
var net_fiyat2 = price + total;
$('#total').text(total.toFixed(2));
}
}
});
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.12/js/select2.full.min.js"></script>
<div class="col-md-12">
<div class="container">
<div class="row">
<div class="col-md-12 pd-40">
<select multiple data-placeholder="Ekstra Malzeme Seçin.." class="ekstra">
<option data-price="1.10">Pizza Sos</option>
<option data-price="1.10">Beyaz Peynir</option>
<option data-price="1.10">Mozarella Peyniri</option>
<option data-price="1.10">Sucuk</option>
<option data-price="1.10">Sosis</option>
</select>
</div>
</div>
</div>
</div>
<input class="radio-button" type="radio" name="radio" data-price="5.12" />
<input class="radio-button" type="radio" name="radio" data-price="6.50" />
<div>
<span class="font-size-27 font-weight-bolds ml-1" id="total"></span>
</div>
推荐阅读
- angularjs - MatExapansionPanel 的角度材料限制切换为仅单击箭头
- android - 使用 setUseNativeTextInput(false) 时 Android 上 TextField 中的文本乱码;
- html - 如何进行 2 个链式转换,第一个带有转换,接下来没有转换?
- python - 如何通过使用python将现有值移动到下一个索引来在特定索引中的现有列表中插入值
- java - Autowire 静态接口对象 - Spring Boot 2.0
- python - tkinter 窗口在被破坏后不会消失
- c# - 如何将文件列的值传递给 ILNumerics 3D 图形?
- python-3.x - 如何在pyspark中使用其他Rdd元素的所有可能组合创建新Rdd?
- python - 如何从Python的excel中的不同位置写入多个单元格
- java - 如何动态声明实例变量?