Question

我必须计算客户下订单时的打印成本。

如果它只是篮子中的1个产品那么简单但在示例中我已经让客户有2个不同的邀请模型，并且两者都有不同的打印选项和成本。

我已根据onclick动作制作了自定义js函数，但由于某种原因，它无法计算正确的期权费用。

我在下面准备了jsfidle：谢谢你的帮助！

function calculate_options() {
  $('.cart > tbody  > .product').each(function() {
    var thisrow = $(this).attr("id");
    var ttloptions = 0.0;
    if ($('.optradio').length) {
      var qty = parseInt($(this).find('.qty').val());
      var optamount = $('#' + thisrow).find('.optradio:checked').attr('data');
      console.log(optamount);
      var ttloptions = optamount * qty;
      $('#' + thisrow).find('.optcost').text('' + ttloptions.toFixed(2));
    }
  })
}

.left {
  float: left;
  text-align: left;
  width: 100%;
}

table.cart label.h15,
.optradio {
  float: left;
}

label.h15 {
  height: auto;
  min-width: 172px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table class="cart">
  <tbody>
    <tr>
      <th>Product name</th>
      <th>qty</th>
      <th>Price</th>
      <th>Options</th>
      <th>Option cost</th>
      <th>Total</th>
    </tr>
    <tr id="1635" class="product">
      <td>Product 1</td>
      <td align="center"> <input type="number" min="20" name="qty[]" class="qty 1635" value="20"></td>
      <td align="left"><input type="text" name="price[]" readonly="true" class="price" maxlength="6" value="1.55"></td>
      <td align="center">
        <div class="row width100 left"><label class="h15">Print options</label><label class="nobold h15"><input type="radio" value="0" data="0" name="print" onclick="calculate_options();" class="optradio">No print</label><label class="nobold h15"><input type="radio" value="1" data="0.50" name="print[]" onclick="calculate_options();" class="optradio">Black print ($0.50) /piece</label>
          <label class="nobold h15"><input type="radio" value="2" data="0.70" name="print[]" onclick="calculate_options();" class="optradio">Color print ($0.70) /piece</label>
        </div>
      </td>
      <td align="center"><span class="optcost"></span></td>
      <td align="center"><span class="amount">$31.00</span></td>
    </tr>

    <tr id="1620" class="product">
      <td>Product 2</td>
      <td align="center"> <input type="number" min="20" name="qty[]" class="qty 1635" value="20"></td>
      <td align="left"><input type="text" name="price[]" readonly="true" class="price" maxlength="6" value="1.20"></td>
      <td align="center">
        <div class="row width100 left"><label class="h15">Print options</label><label class="nobold h15"><input type="radio" value="0" data="0" name="print" onclick="calculate_options();" class="optradio">No print</label><label class="nobold h15"><input type="radio" value="1" data="0.30" name="print[]" onclick="calculate_options();" class="optradio">Black print ($0.50) /piece</label>
          <label class="nobold h15"><input type="radio" value="2" data="0.70" name="print[]" onclick="calculate_options();" class="optradio">Color print ($0.70) /piece</label>
        </div>
      </td>
      <td align="center"><span class="optcost"></span></td>
      <td align="center"><span class="amount">$24.00</span></td>
    </tr>
  </tbody>
</table>

Answer 1

不是仅仅在一个函数中执行选项成本计算，而是在单个更改处理程序中为整行执行所有操作。诀窍是确保首先隔离行实例，然后始终使用该父行的find()查找行特定元素

$('.product :input ').on('change', function(e) {
  // start by isolating row instance
  var $row = $(this).closest('tr.product'),
    // then use find() for the row specific elements
    qty = +$row.find('.qty').val(),
    price = +$row.find('.price').val(),
    $opt = $row.find(':radio:checked'),
    optamount = 0;
  if ($opt.length) {
    optamount += $opt.attr('data') * qty;
  }
  total = (qty * price + optamount).toFixed(2);

  $row.find('.optcost').text(optamount.toFixed(2))

  $row.find('.amount').text('$' + total)
    // trigger one change on each row on page load
}).filter('.qty').change();

DEMO

请注意，您需要修复广播名称，使其在每行基础上相互匹配

Jquery计算表行总数

1 个答案: