时间戳

首页 > 解决方案 > 在jQuery中将价格的所有值与数量相乘并相加

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

问题描述

我做了一个小提琴来准确地展示我需要的东西。只需显示所有点击项目的总价及其数量。所有项目及其各自的属性都是动态生成的，因此每个项目都有其唯一的 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);
  }
}

标签： javascriptjqueryaddmultiplication

解决方案

要实现您需要的内容，您需要遍历每个“数量”输入，将其乘以相关商品的价格并将其添加到运行总计中。

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

尝试这个：

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: "\2713";
  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 €&lt;/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 €&lt;/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 €&lt;/span>
    </label>
  </div>

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

推荐阅读