Question

我有一个有多个选项的表单。一个人可以通过点击更改项目数量的+和-按钮来选择多个产品。我想要发生的是同时总数也发生了变化。

我知道如何更改数量，但我不知道该怎么做才能正确地加价。

换句话说，如果一个人以32.00美元的价格选择一件商品而另一件商品的价格为62.00美元，那么总价格应为126.00美元

我该怎么做？

以下是正在使用的HTML代码示例：

<ul class="large-block-grid-3">
 <li>
  <label for="CAT_Custom_410672">Veloce - $32.00</label>
   <input type="text" class="cat_textbox quantity" id="CAT_Custom_410672" name="CAT_Custom_410672" maxlength="4000" value="0" />
   <input type="hidden" class="ik-price" value="32.00">
     <ul class="button-group radius button-click">
       <li><a href="#" class="small button secondary"><i class="fa fa-plus"><span class="hide">+</span></i></a></li>
        <li><a href="#" class="small button secondary"><i class="fa fa-minus"><span class="hide">-</span></i></a></li>
     </ul>
 </li>
 <li>
  <label for="CAT_Custom_410680">Spin Pen - $62.00</b></label>
   <input type="text" class="cat_textbox quantity" id="CAT_Custom_410680" name="CAT_Custom_410680" maxlength="4000" value="0" />
   <input type="hidden" class="ik-price" value="62.00">
    <ul class="button-group radius button-click">
     <li><a href="#" class="small button secondary"><i class="fa fa-plus"><span class="hide">+</span></i></a></li>
     <li><a href="#" class="small button secondary"><i class="fa fa-minus"><span class="hide">-</span></i></a></li>
    </ul>
 </li>
 <li>
   <label for="CAT_Custom_410681">Waxcalibur - $160.00</b></label>
    <input type="text" class="cat_textbox quantity" id="CAT_Custom_410681" name="CAT_Custom_410681" maxlength="4000" value="0" />
    <input type="hidden" class="ik-price" value="160.00">
      <ul class="button-group radius button-click">
        <li><a href="#" class="small button secondary"><i class="fa fa-plus"><span class="hide">+</span></i></a></li>
        <li><a href="#" class="small button secondary"><i class="fa fa-minus"><span class="hide">-</span></i></a></li>
      </ul>
  </li>
</ul>

在浏览Google和我时，我遇到了几个示例，这些示例显示将一个字段添加到一起或以不同于我正在进行的方式添加字段。我不知道如何使这些脚本适应工作。

任何帮助都非常感谢，javascript不是我最强的套装。

以下是我用于向上或向下数量的脚本：

$(function() {
 $(".button-click a").on("click", function() {

  var $button = $(this);
  var oldValue = $button.closest("ul").prev().val();

  if ($button.text() == "+") {
      var newVal = parseInt(oldValue) +1;

    } else {
    if (oldValue > 0) {
      var newVal = parseInt(oldValue - 1);
    } else {
      newVal = 0;
    }
  }
  $button.closest("ul").prev().val(newVal);

 })
});

如果可以修改此脚本，不仅可以更改数量，还可以添加更好的总数！

注意：总计的HTML输出是一个输入字段：

<input type="text" class="cat_textbox amount" id="Amount" name="Amount" />

Answer 1

试试这个：

$(".button-click a").on("click", function () {
    var $button = $(this);
    var txt = $button.closest("ul").prev().parent().find(".quantity"); //find quantity
    var oldValue = $(txt).val(); //find amount

    if ($button.text() == "+") {
        var newVal = parseInt(oldValue) + 1;

    } else {
        if (oldValue > 0) {
            var newVal = parseInt(oldValue - 1);
        } else {
            newVal = 0;
        }
    }
    $(txt).val(newVal); //change value of textbox
    calculate();
});

function calculate() {
    var total = 0;
    $('.button-click').each(function () {
        var amt = parseInt($(this).prev().val()); //find amount
        var qty = parseInt($(this).parent().find(".quantity").val()); //find quantity
        total += (amt * qty); // calculate total
    });
    $('#Amount').val(total.toFixed(2)); //print total
}

Fiddle here.

根据数量添加和减去总数？

1 个答案: