将价格的所有值与 jQuery 中的数量相乘并相加

Question

我做了一个 fiddle 来准确显示我需要的东西。只需显示所有点击商品的总价及其数量。所有项目及其各自的属性都是动态生成的，因此每个项目都有其唯一的 jquery 脚本。虽然它们都是一样的，但我发布了其中一个。他们工作正常。每个脚本末尾只缺少一件事来显示总价并将它们加在一起形成一个总价 ID。

http://jsfiddle.net/d1kztxu8/

function incrementValue2047() {
  var value = parseInt(document.getElementById("qty2047").value, 10);
  value = isNaN(value) ? 0 : value;
  value++;
  document.getElementById("qty2047").value = value;
  $("#qty-counter2047").addClass("active");
  $("#qty-counter-buttons2047").addClass("active");
}

function clickup2047() {
  var el = document.getElementById("qty2047");
  el.value = Number(el.value) + 1;
  if (el.value == 10) return false;
}

function clickdown2047() {
  var el = document.getElementById("qty2047");
  if (el.value == 0) return false;
  el.value = Number(el.value) - 1;
  if (document.getElementById("qty2047").value == "0") {
    $("#qty-counter-buttons2047").removeClass("active");
    $("#qty-counter2047").removeClass("active");
    $("#menu_attr_checkbox_12_2047").prop("checked", false);
  }
}

Answer 1

要实现您的要求，您需要遍历每个 'quantity' 输入，将其乘以相关商品的价格，然后将其加到运行总数中。

但是，由于您的代码有太多不必要的重复，我强烈建议您先将其干燥。您可以通过删除所有不必要的 id 属性并根据元素的行为将 HTML 内容按类分组来实现此目的。从那里您可以将相同的单击事件处理程序应用于数量 increment/decrement 控件，以便它应用于列表中的所有项目。

试试这个：

let updateTotal = () => {
  let total = 0;
  $('.qty-count').each((i, el) => {
    let $container = $(el).closest('.qty-check');
    total += el.value * $container.find('.menu_attribute_sum').data('price_plus');
  });
  $('.total-value').text(total.toFixed(2) + '€');
}

$('.amend-qty').on('click', e => {
  e.preventDefault();
  let $el = $(e.target);
  let $container = $el.closest('.qty-check');
  $container.find('.qty-count').val((i, v) => Math.max(0, parseInt(v, 10) + $el.data('dir')));
  updateTotal();
});

.attr-group {
  width: 400px;
  margin: 0 auto;
  display: table
}

.checkbox {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  position: relative;
}

.checkbox-input {
  display: none;
}

.checkbox label {
  width: 100%;
  margin: 0;
  padding-left: 30px !important;
  display: flex;
  font-weight: 300;
  height: auto;
  min-height: 30px;
  justify-content: space-between;
  align-items: center;
}

.checkbox-label:before {
  content: "";
  display: flex;
  justify-content: center;
  align-items: center;
  width: 25px;
  height: 25px;
  margin: 0px;
  border-radius: 0.5rem;
  text-align: center;
  background: #f2f4f5;
  position: absolute;
  margin-left: -30px;
  border: 1px solid #141414;
}

.checkbox-input:checked+.checkbox-label:before {
  content: "13";
  font-size: 18px;
  color: #fff;
  background: #515D67;
  border-color: #515D67;
}

.qty-count {
  min-width: 25px;
  max-width: 25px;
  min-height: 25px;
  max-height: 25px;
  border-radius: 1rem;
  line-height: 15px;
  text-align: center;
  font-size: 1.2rem;
  padding: 0 !important;
  margin-right: 1rem;
}

.qty-check label {
  padding-left: 0 !important;
  justify-content: flex-start !important;
  align-items: flex-start;
}

.qty-check .name {
  padding-right: 90px;
}

.qty-check label:before {
  display: none !important;
}

.qty-check .checkbox-input:checked+.checkbox-label .qty-count {
  background: #515D67 !important;
  color: #fff !important;
}

.qty-counter {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  display: none;
}

.qty-counter.active {
  display: block;
}

.counter-buttons {
  position: absolute;
  right: 50px;
  min-width: 50px;
  z-index: 4;
  display: flex;
  align-items: center;
  border-radius: 1rem;
  background: #fff;
  border: 1px solid #dee2e5;
  display: none;
  overflow: hidden;
}

.counter-buttons.active {
  display: flex;
}

.counter-buttons a {
  min-width: 30px;
  height: 20px;
  font-size: 1.8rem;
  line-height: 20px;
  text-align: center;
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Safari */
  -khtml-user-select: none;
  /* Konqueror HTML */
  -moz-user-select: none;
  /* Old versions of Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

.counter-buttons a:hover {
  background: #f2f4f5;
}

.price {
  margin-left: auto
}

.total-value {
  margin-left: auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="attr-group">
  <!-- Item 1 -->
  <div class="checkbox qty-check">
    <span class="qty-counter active" data-amount="1.00"></span>
    <span class="counter-buttons active">
      <a class="amend-qty" data-dir="1" href="#">+</a>
      <a class="amend-qty" data-dir="-1" href="#">-</a>
    </span>
    <input type="checkbox" name="menu_attribute[12][]" value="2047" id="menu_attr_checkbox_12_2047" class="checkbox-input menu_attribute_sum" data-price_plus="1.0" form="addedBasketFormOptions" />
    <label for="menu_attr_checkbox_12_2047" class="checkbox-label amend-qty" data-dir="1">
      <input type="text" value="0" name="menu_attribute_qty[2047]" class="qty-count" />
      <span class="name mr-auto">CocaCola</span>
      <span class="price ml-auto">1.00 €</span>
    </label>
  </div>
  
  <!-- Item 2 -->  
  <div class="checkbox qty-check">
    <span class="qty-counter active" data-amount="1.40"></span>
    <span class="counter-buttons active">
      <a class="amend-qty" data-dir="1" href="#">+</a>
      <a class="amend-qty" data-dir="-1" href="#">-</a>
    </span>
    <input type="checkbox" name="menu_attribute[12][]" value="2047" id="menu_attr_checkbox_12_2047" class="checkbox-input menu_attribute_sum" data-price_plus="1.4" form="addedBasketFormOptions" />
    <label for="menu_attr_checkbox_12_2047" class="checkbox-label amend-qty" data-dir="1">
      <input type="text" value="0" name="menu_attribute_qty[2047]" class="qty-count" />
      <span class="name mr-auto">Fanta</span>
      <span class="price ml-auto">1.40 €</span>
    </label>
  </div>
  
  <!-- Item 3  -->
  <div class="checkbox qty-check">
    <span class="qty-counter active" data-amount="1.40"></span>
    <span class="counter-buttons active">
      <a class="amend-qty" data-dir="1" href="#">+</a>
      <a class="amend-qty" data-dir="-1" href="#">-</a>
    </span>
    <input type="checkbox" name="menu_attribute[12][]" value="2047" id="menu_attr_checkbox_12_2047" class="checkbox-input menu_attribute_sum" data-price_plus="1.4" form="addedBasketFormOptions" />
    <label for="menu_attr_checkbox_12_2047" class="checkbox-label amend-qty" data-dir="1">
      <input type="text" value="0" name="menu_attribute_qty[2047]" class="qty-count" />
      <span class="name mr-auto">Mythos</span>
      <span class="price ml-auto">1.40 €</span>
    </label>
  </div>

  <!-- Total -->
  <div style="display:flex;width:100%; justify-content:space-between">
    <h2>Total</h2>
    <h2 class="total-value">0.00€</h2>
  </div>
</div>

Answer 2

您需要实际计算和更新总数。

我在保存总值的 <h2> 元素中添加了一个 class (order-total)。这是我对 HTML 所做的唯一更改。我试图尽可能完整地保留您的原始代码，以便您可以将其与您自己的逻辑进行比较。

我还将大部分 document.getElementById 和 .value 逻辑转换为 jQuery 等效逻辑。如果您使用 jQuery，则全有或全无。不要尝试将本机选择器调用与 jQuery 混合使用。我还生成了 up/down 和增量函数以接受 id.

如果您在引用元素的按钮上存储数据属性，则可以进一步清理这些内容。这将允许您删除底部仅传入 id.

的所有函数

注意：第一项的data-price_plus值是错误的。它设置为 1.40 而不是 1.00。

function incrementValue(id) {
  var $el = $('#qty' + id);
  var val = Number($el.val());
  val = isNaN(val) ? 0 : val;
  $el.val(val + 1);
  $('#qty-counter' + id).addClass('active');
  $('#qty-counter-buttons' + id).addClass('active');
  calculateTotal();
};

function clickUp(id) {
  var $el = $('#qty' + id);
  var val = Number($el.val());
  console.log(val);
  if (val >= 10) return false;
  $el.val(val + 1);
  calculateTotal();
}

function clickDown(id) {
  var $el = $('#qty' + id);
  var val = Number($el.val());
  if (val < 1) return false;
  $el.val(val - 1);
  if ($('#qty' + id).val() === '0') {
    $('#qty-counter-buttons' + id).removeClass('active');
    $('#qty-counter' + id).removeClass('active');
    $('#menu_attr_checkbox_12_' + id).prop('checked', false);
  }
  calculateTotal();
}

function calculateTotal() {
  var total = 0;
  $('.qty-check').each(function() {
    var count = Number($(this).find('.qty-count').val());
    var price = Number($(this).find('.price').text().replace(/[^\d\.]+/g, ''));
    total += (price * count);
  });
  $('.order-total').text(total.toFixed(2) + ' €');
}

function incrementValue2047() { incrementValue(2047) }
function incrementValue2048() { incrementValue(2048) }
function incrementValue2049() { incrementValue(2049) }

function clickup2047() { clickUp(2047) }
function clickup2048() { clickUp(2048) }
function clickup2049() { clickUp(2049) }

function clickdown2047() { clickDown(2047) }
function clickdown2048() { clickDown(2048) }
function clickdown2049() { clickDown(2049) }

.attr-group {
  width: 400px;
  margin: 0 auto;
  display: table
}

.checkbox {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  position: relative;
}

.checkbox-input {
  display: none;
}

.checkbox label {
  width: 100%;
  margin: 0;
  padding-left: 30px !important;
  display: flex;
  font-weight: 300;
  height: auto;
  min-height: 30px;
  justify-content: space-between;
  align-items: center;
}

.checkbox-label:before {
  content: "";
  display: flex;
  justify-content: center;
  align-items: center;
  width: 25px;
  height: 25px;
  margin: 0px;
  border-radius: 0.5rem;
  text-align: center;
  background: #f2f4f5;
  position: absolute;
  margin-left: -30px;
  border: 1px solid #141414;
}

.checkbox-input:checked+.checkbox-label:before {
  content: "13";
  font-size: 18px;
  color: #fff;
  background: #515D67;
  border-color: #515D67;
}

.qty-count {
  min-width: 25px;
  max-width: 25px;
  min-height: 25px;
  max-height: 25px;
  border-radius: 1rem;
  line-height: 15px;
  text-align: center;
  font-size: 1.2rem;
  padding: 0 !important;
  margin-right: 1rem;
}

.qty-check label {
  padding-left: 0 !important;
  justify-content: flex-start !important;
  align-items: flex-start;
}

.qty-check .name {
  padding-right: 90px;
}

.qty-check label:before {
  display: none !important;
}

.qty-check .checkbox-input:checked+.checkbox-label .qty-count {
  background: #515D67 !important;
  color: #fff !important;
}

.qty-counter {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  display: none;
}

.qty-counter.active {
  display: block;
}

.counter-buttons {
  position: absolute;
  right: 50px;
  min-width: 50px;
  z-index: 4;
  display: flex;
  align-items: center;
  border-radius: 1rem;
  background: #fff;
  border: 1px solid #dee2e5;
  display: none;
  overflow: hidden;
}

.counter-buttons.active {
  display: flex;
}

.counter-buttons a {
  min-width: 30px;
  height: 20px;
  font-size: 1.8rem;
  line-height: 20px;
  text-align: center;
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Safari */
  -khtml-user-select: none;
  /* Konqueror HTML */
  -moz-user-select: none;
  /* Old versions of Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

.counter-buttons a:hover {
  background: #f2f4f5;
}

.price {
  margin-left: auto
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="attr-group">
  <!-- Item #2047 ~ CocaCola ~ 1.00 € -->
  <div class="checkbox qty-check">
    <span class="qty-counter" data-amount="1.40" id="qty-counter2047" onclick="incrementValue2047()"></span>
    <span id="qty-counter-buttons2047" class="counter-buttons">
      <a onclick="clickup2047()">+</a><a onclick="clickdown2047()">-</a>
    </span>
    <input type="checkbox" name="menu_attribute[12][]" value="2047" id="menu_attr_checkbox_12_2047" class="checkbox-input menu_attribute_sum" data-price_plus="1.4" form="addedBasketFormOptions">
    <label for="menu_attr_checkbox_12_2047" class="checkbox-label" onclick="incrementValue2047()">
      <input type="text" value="0" name="menu_attribute_qty[2047]" id="qty2047" class="qty-count">
      <span class="name mr-auto">CocaCola</span>
      <span class="price ml-auto">1.00 €</span>
    </label>
  </div>
  <!-- Item #2048 ~ Fanta ~ 1.40 € -->
  <div class="checkbox qty-check">
    <span class="qty-counter" data-amount="1.40" id="qty-counter2048" onclick="incrementValue2048()"></span>
    <span id="qty-counter-buttons2048" class="counter-buttons">
      <a onclick="clickup2048()">+</a><a onclick="clickdown2048()">-</a>
    </span>
    <input type="checkbox" name="menu_attribute[12][]" value="2048" id="menu_attr_checkbox_12_2048" class="checkbox-input menu_attribute_sum" data-price_plus="1.4" form="addedBasketFormOptions">
    <label for="menu_attr_checkbox_12_2048" class="checkbox-label" onclick="incrementValue2048()">
      <input type="text" value="0" name="menu_attribute_qty[2048]" id="qty2048" class="qty-count">
      <span class="name mr-auto">Fanta</span>
      <span class="price ml-auto">1.40 €</span>
    </label>
  </div>
  <!-- Item #2049 ~ Mythos ~ 1.40 € -->
  <div class="checkbox qty-check">
    <span class="qty-counter" data-amount="1.40" id="qty-counter2049" onclick="incrementValue2049()"></span>
    <span id="qty-counter-buttons2049" class="counter-buttons">
      <a onclick="clickup2049()">+</a><a onclick="clickdown2049()">-</a>
    </span>
    <input type="checkbox" name="menu_attribute[12][]" value="2049" id="menu_attr_checkbox_12_2049" class="checkbox-input menu_attribute_sum" data-price_plus="1.4" form="addedBasketFormOptions">
    <label for="menu_attr_checkbox_12_2049" class="checkbox-label" onclick="incrementValue2049()">
      <input type="text" value="0" name="menu_attribute_qty[2049]" id="qty2049" class="qty-count">
      <span class="name mr-auto">Mythos</span>
      <span class="price ml-auto">1.40 €</span>
    </label>
  </div>
  <!-- Total -->
  <div style="display:flex;width:100%; justify-content:space-between">
    <h2>Total</h2>
    <h2 class="order-total" style:margin-left:auto;>0 €</h2>
  </div>
</div>

将价格的所有值与 jQuery 中的数量相乘并相加

Multiply and add all values of a price with quantity in jQuery

javascript

jquery

add

multiplication