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

Question

因此，我使用 jquery-calx 来计算某些商品的价格。根据基本选择和数量，我有不同的价格。如果用户选择 100 件全彩底色，则价格与 100 件单面单色图案不同。这一切都在我的代码中起作用，但是有一件事；如果我选择单面单色且 100 件，则总面积的价格还可以，但如果我将底座更改为全彩，则价格不会更新。在这种情况下，如果我再次单击数量，价格就会更新。我想知道是否可以顺利进行更新。也许创建一个更新按钮，我不知道。将不胜感激的帮助!下面是我的代码:

<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，但对于这样的事情来说确实没有必要。如果是我，我会这样做:

• 在设计输入上存储一组值
• 给所有输入一个更新类
• 当任何输入发生更改时，从选定的设计输入中获取数组，选定的“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>