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

时间：2016-01-16 01:23:57

标签： javascript jquery forms calculator

所以，我使用jquery-calx来计算某些商品的价格。根据基本选择和数量，我有不同的价格。如果用户选择100色全色底座，则价格不同于100个单面单色图案。这一切都在我的代码中工作，但有一件事;如果我选择One Side Monochromatic和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');
  }
});

谢谢！

1 个答案:

答案 0 :(得分：1)

我从未使用过jquery-calx，但它确实不是必需的。如果是我，我会这样做：

  • 在设计输入上存储一组值
  • 为所有输入提供update
    • 类
  • 当任何输入被更改时，从所选设计输入中获取数组，并且所选“maisuu”输入的索引告诉我们从该存储数组中使用哪个值
  • 从所选“maisuu”elemet
    • 的值中获取数量
  • 做数学并设定总数

像这样：

*请注意，您可能需要调整数学，而不是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>

相关问题
最新问题