为什么我的号码不自行更新？

Question

所以，我使用jquery-calx 来计算某些商品的价格。根据基本选择和数量，我有不同的价格。如果用户选择 100 片全彩底，价格与 100 片 One Side Monochromatic 图案不同。这一切都在我的代码中工作，但有一点；如果我选择 One Side Monochromatic 并且它们 100 件，总区域的价格是可以的，但如果我将基础更改为 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');
  }
});

谢谢！

Answer 1

我从未使用过 jquery-calx，但对于这样的事情确实没有必要。如果是我，我会这样做：

• 在设计输入中存储一组值
• 给所有的输入一个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>