为什么我的号码没有自行更新？
Why my numbers are not updating by themselves?
所以，我正在使用 jquery-calx 来计算一些商品的价格。根据基本选择和数量，我有不同的价格。如果用户选择 100 片全彩底座，价格不同于 100 片单面单色图案。这一切都在我的代码中工作，但有一件事；如果我选择 One Side Monochromatic 并且它们是 100 件，则 Total area 中的价格是可以的，但是如果我将 base 更改为 Full Color，例如，价格不会更新。在这种情况下，如果我再次点击数量，价格会更新。我想知道是否可以顺利进行更新。也许创建一个按钮来更新，我不知道。非常感谢您的帮助！下面是我的代码：
<form class="form-horizontal" id="meishi" data-calx-identifier="CALX1452836013763">
<div class="form-group">
<label class="col-lg-1 topic text-left">Base</label>
<div class="col-lg-2">
<label class="radio-inline">
<input type="radio" name="design" data-cell="A1" value="10800">One Side Monochromatic
</label>
</div>
<div class="col-lg-3">
<label class="radio-inline">
<input type="radio" name="design" data-cell="B1" value="14040">One Side Color
</label>
</div>
<div class="col-lg-2">
<label class="radio-inline">
<input type="radio" name="design" data-cell="C1" value="16200">Full Color
</label>
</div>
<div class="col-lg-2 col-lg-offset-2 text-right">
<label data-cell="F1" data-formula="SUM(A1:C1)" data-format="$ 0,0"></label>
</div>
</div>
<div class="form-group">
<label class="col-lg-1 topic text-left">Quantity</label>
<div class="col-lg-2">
<label class="radio-inline">
<input class="maisuuA" type="radio" name="quantity" data-cell="A3" value="">100
</label>
</div>
<div class="col-lg-2">
<label class="radio-inline">
<input class="maisuuB" type="radio" name="quantity" data-cell="B3" value="">200
</label>
</div>
<div class="col-lg-2">
<label class="radio-inline">
<input class="maisuuC" type="radio" name="quantity" data-cell="C3" value="">300
</label>
</div>
<div class="col-lg-2">
<label class="radio-inline">
<input class="maisuuD" type="radio" name="quantity" data-cell="D3" value="">400
</label>
</div>
<div class="col-lg-1">
<label class="radio-inline">
<input class="maisuuE" type="radio" name="quantity" data-cell="E3" value="">500
</label>
</div>
<div class="col-lg-2 text-right">
<label data-cell="F3" data-formula="SUM(A3:E3)" data-format="$ 0,0"></label>
</div>
</div>
<div class="form-group">
<label class="col-lg-1 topic text-left">Total</label>
<div class="col-lg-3 text-right col-lg-offset-8">
<label data-cell="F6" data-format="$ 0,0" data-formula="SUM(F1:F5)">$ 0</label>
</div>
</div>
</form>
脚本：
$('#meishi').calx();
$('input:radio[name="design"]').change(
function() {
if ($(this).is(':checked') && $(this).val() == '10800') {
$('.maisuuA').val('2160');
$('.maisuuB').val('2484');
$('.maisuuC').val('3132');
$('.maisuuD').val('2808');
$('.maisuuE').val('3456');
} else if ($(this).is(':checked') && $(this).val() == '14040') {
$('.maisuuA').val('2808');
$('.maisuuB').val('3132');
$('.maisuuC').val('3780');
$('.maisuuD').val('3456');
$('.maisuuE').val('4104');
} else if ($(this).is(':checked') && $(this).val() == '16200') {
$('.maisuuA').val('3240');
$('.maisuuB').val('3564');
$('.maisuuC').val('4212');
$('.maisuuD').val('3888');
$('.maisuuE').val('4536');
}
});
谢谢！
我从来没有用过 jquery-calx 但对于这样的事情确实没有必要。如果是我，我会这样做：
- 在设计输入上存储一组值
- 给所有输入一个 class of
update
- 当任何输入发生变化时，从所选设计输入中获取数组，所选 "maisuu" 输入的索引告诉我们要使用该存储数组中的哪个值
- 从所选 "maisuu" 元素的值中获取数量
- 计算一下并设置总数
像这样：
*请注意，您可能需要调整数学运算，不能 100% 确定计算是否符合您的预期。此外，如果您坚持，我相信您可以将此技术与 jquery-calx
的使用合并
Here's a jsFiddle with comments explaining the code
$('.update').change(function() {
var $design = $('input[name="design"]:checked');
var $maisuu = $('input.maisuu:checked');
var curMaisuu =$('.maisuu').index($maisuu);
var maisuuArr =$.map($design.data('values').split(','), function(e, i) {
return Number(e);
});
var base = $design.val() * 1000;
var upcharge = maisuuArr[curMaisuu] * 1000
var qty = $maisuu.val();
var cost = ((base + upcharge)* qty ) / 1000
if (base && qty) $('#total').text('$' + cost.toFixed(2))
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<form class="form-horizontal" id="meishi" data-calx-identifier="CALX1452836013763">
<div class="form-group">
<label class="col-lg-1 topic text-left">Base</label>
<div class="col-lg-2">
<label class="radio-inline">
<input class="update" type="radio" name="design" data-cell="A1" value="108.00" data-values="21.60,24.84,31.32,28.08,34.56">One Side Monochromatic
</label>
</div>
<div class="col-lg-3">
<label class="radio-inline">
<input class="update" type="radio" name="design" data-cell="B1" value="140.40" data-values="28.08,31.32,37.80,34.56,41.04">One Side Color
</label>
</div>
<div class="col-lg-2">
<label class="radio-inline">
<input class="update" type="radio" name="design" data-cell="C1" value="162.00" data-values="32.40,35.64,42.12,38.88,45.36">Full Color
</label>
</div>
<div class="col-lg-2 col-lg-offset-2 text-right">
<label data-cell="F1" data-formula="SUM(A1:C1)" data-format="$ 0,0"></label>
</div>
</div>
<div class="form-group">
<label class="col-lg-1 topic text-left">Quantity</label>
<div class="col-lg-2">
<label class="radio-inline">
<input class="maisuu update" type="radio" name="quantity" data-cell="A3" value="100">100
</label>
</div>
<div class="col-lg-2">
<label class="radio-inline">
<input class="maisuu update" type="radio" name="quantity" data-cell="B3" value="200">200
</label>
</div>
<div class="col-lg-2">
<label class="radio-inline">
<input class="maisuu update" type="radio" name="quantity" data-cell="C3" value="300">300
</label>
</div>
<div class="col-lg-2">
<label class="radio-inline">
<input class="maisuu update" type="radio" name="quantity" data-cell="D3" value="400">400
</label>
</div>
<div class="col-lg-1">
<label class="radio-inline">
<input class="maisuu update" type="radio" name="quantity" data-cell="E3" value="500">500
</label>
</div>
<div class="col-lg-2 text-right">
<label data-cell="F3" data-formula="SUM(A3:E3)" data-format="$ 0,0"></label>
</div>
</div>
<div class="form-group">
<label class="col-lg-1 topic text-left">Total</label>
<div class="col-lg-3 text-right col-lg-offset-8">
<label id="total">$ 0</label>
</div>
</div>
</form>
所以，我正在使用 jquery-calx 来计算一些商品的价格。根据基本选择和数量，我有不同的价格。如果用户选择 100 片全彩底座，价格不同于 100 片单面单色图案。这一切都在我的代码中工作，但有一件事；如果我选择 One Side Monochromatic 并且它们是 100 件，则 Total area 中的价格是可以的，但是如果我将 base 更改为 Full Color，例如，价格不会更新。在这种情况下，如果我再次点击数量，价格会更新。我想知道是否可以顺利进行更新。也许创建一个按钮来更新，我不知道。非常感谢您的帮助！下面是我的代码：
<form class="form-horizontal" id="meishi" data-calx-identifier="CALX1452836013763">
<div class="form-group">
<label class="col-lg-1 topic text-left">Base</label>
<div class="col-lg-2">
<label class="radio-inline">
<input type="radio" name="design" data-cell="A1" value="10800">One Side Monochromatic
</label>
</div>
<div class="col-lg-3">
<label class="radio-inline">
<input type="radio" name="design" data-cell="B1" value="14040">One Side Color
</label>
</div>
<div class="col-lg-2">
<label class="radio-inline">
<input type="radio" name="design" data-cell="C1" value="16200">Full Color
</label>
</div>
<div class="col-lg-2 col-lg-offset-2 text-right">
<label data-cell="F1" data-formula="SUM(A1:C1)" data-format="$ 0,0"></label>
</div>
</div>
<div class="form-group">
<label class="col-lg-1 topic text-left">Quantity</label>
<div class="col-lg-2">
<label class="radio-inline">
<input class="maisuuA" type="radio" name="quantity" data-cell="A3" value="">100
</label>
</div>
<div class="col-lg-2">
<label class="radio-inline">
<input class="maisuuB" type="radio" name="quantity" data-cell="B3" value="">200
</label>
</div>
<div class="col-lg-2">
<label class="radio-inline">
<input class="maisuuC" type="radio" name="quantity" data-cell="C3" value="">300
</label>
</div>
<div class="col-lg-2">
<label class="radio-inline">
<input class="maisuuD" type="radio" name="quantity" data-cell="D3" value="">400
</label>
</div>
<div class="col-lg-1">
<label class="radio-inline">
<input class="maisuuE" type="radio" name="quantity" data-cell="E3" value="">500
</label>
</div>
<div class="col-lg-2 text-right">
<label data-cell="F3" data-formula="SUM(A3:E3)" data-format="$ 0,0"></label>
</div>
</div>
<div class="form-group">
<label class="col-lg-1 topic text-left">Total</label>
<div class="col-lg-3 text-right col-lg-offset-8">
<label data-cell="F6" data-format="$ 0,0" data-formula="SUM(F1:F5)">$ 0</label>
</div>
</div>
</form>
脚本：
$('#meishi').calx();
$('input:radio[name="design"]').change(
function() {
if ($(this).is(':checked') && $(this).val() == '10800') {
$('.maisuuA').val('2160');
$('.maisuuB').val('2484');
$('.maisuuC').val('3132');
$('.maisuuD').val('2808');
$('.maisuuE').val('3456');
} else if ($(this).is(':checked') && $(this).val() == '14040') {
$('.maisuuA').val('2808');
$('.maisuuB').val('3132');
$('.maisuuC').val('3780');
$('.maisuuD').val('3456');
$('.maisuuE').val('4104');
} else if ($(this).is(':checked') && $(this).val() == '16200') {
$('.maisuuA').val('3240');
$('.maisuuB').val('3564');
$('.maisuuC').val('4212');
$('.maisuuD').val('3888');
$('.maisuuE').val('4536');
}
});
谢谢！
我从来没有用过 jquery-calx 但对于这样的事情确实没有必要。如果是我，我会这样做：
- 在设计输入上存储一组值
- 给所有输入一个 class of
update - 当任何输入发生变化时，从所选设计输入中获取数组，所选 "maisuu" 输入的索引告诉我们要使用该存储数组中的哪个值
- 从所选 "maisuu" 元素的值中获取数量
- 计算一下并设置总数
像这样：
*请注意，您可能需要调整数学运算，不能 100% 确定计算是否符合您的预期。此外，如果您坚持，我相信您可以将此技术与 jquery-calx
的使用合并Here's a jsFiddle with comments explaining the code
$('.update').change(function() {
var $design = $('input[name="design"]:checked');
var $maisuu = $('input.maisuu:checked');
var curMaisuu =$('.maisuu').index($maisuu);
var maisuuArr =$.map($design.data('values').split(','), function(e, i) {
return Number(e);
});
var base = $design.val() * 1000;
var upcharge = maisuuArr[curMaisuu] * 1000
var qty = $maisuu.val();
var cost = ((base + upcharge)* qty ) / 1000
if (base && qty) $('#total').text('$' + cost.toFixed(2))
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<form class="form-horizontal" id="meishi" data-calx-identifier="CALX1452836013763">
<div class="form-group">
<label class="col-lg-1 topic text-left">Base</label>
<div class="col-lg-2">
<label class="radio-inline">
<input class="update" type="radio" name="design" data-cell="A1" value="108.00" data-values="21.60,24.84,31.32,28.08,34.56">One Side Monochromatic
</label>
</div>
<div class="col-lg-3">
<label class="radio-inline">
<input class="update" type="radio" name="design" data-cell="B1" value="140.40" data-values="28.08,31.32,37.80,34.56,41.04">One Side Color
</label>
</div>
<div class="col-lg-2">
<label class="radio-inline">
<input class="update" type="radio" name="design" data-cell="C1" value="162.00" data-values="32.40,35.64,42.12,38.88,45.36">Full Color
</label>
</div>
<div class="col-lg-2 col-lg-offset-2 text-right">
<label data-cell="F1" data-formula="SUM(A1:C1)" data-format="$ 0,0"></label>
</div>
</div>
<div class="form-group">
<label class="col-lg-1 topic text-left">Quantity</label>
<div class="col-lg-2">
<label class="radio-inline">
<input class="maisuu update" type="radio" name="quantity" data-cell="A3" value="100">100
</label>
</div>
<div class="col-lg-2">
<label class="radio-inline">
<input class="maisuu update" type="radio" name="quantity" data-cell="B3" value="200">200
</label>
</div>
<div class="col-lg-2">
<label class="radio-inline">
<input class="maisuu update" type="radio" name="quantity" data-cell="C3" value="300">300
</label>
</div>
<div class="col-lg-2">
<label class="radio-inline">
<input class="maisuu update" type="radio" name="quantity" data-cell="D3" value="400">400
</label>
</div>
<div class="col-lg-1">
<label class="radio-inline">
<input class="maisuu update" type="radio" name="quantity" data-cell="E3" value="500">500
</label>
</div>
<div class="col-lg-2 text-right">
<label data-cell="F3" data-formula="SUM(A3:E3)" data-format="$ 0,0"></label>
</div>
</div>
<div class="form-group">
<label class="col-lg-1 topic text-left">Total</label>
<div class="col-lg-3 text-right col-lg-offset-8">
<label id="total">$ 0</label>
</div>
</div>
</form>