时间戳

首页 > 解决方案 > 从总值中添加或减去函数

javascript - 从总值中添加或减去函数

问题描述

因此，我想根据单击的 div（减号或加号）从总计中添加或减去一个值。计数器还显示值是多少（我正在工作）。所以我想计算点击项目的总数。

我现在的代码：

var minExtras = document.querySelectorAll(".extra-min");
var plusExtras = document.querySelectorAll(".extra-plus");
var totalPrice = document.getElementById("totalPrice");
totalPrice.innerHTML = "Totaalprijs:   € ";

Array.prototype.forEach.call(minExtras, function (minExtra) {
 minExtra.addEventListener('click', function() {
  var currentCount = minExtra.parentElement.querySelector('.count').innerText;
  if (currentCount !== "1") {
   var newCount = currentCount - 1;
   minExtra.parentElement.querySelector('.count').innerText = newCount;
  }
  var colorMin = minExtra.parentElement.querySelector('.extra-min');
  if (newCount === 1) {
   colorMin.setAttribute("class", "change-extra min extra-min");
  }
    var extraPrice = minExtra.parentElement.querySelector('.extraPrice').innerText;
  var extraPriceValue = extraPrice * newCount;
  calculateMin(extraPriceValue);
 })
});

Array.prototype.forEach.call(plusExtras, function (plusExtra) {
 plusExtra.addEventListener('click', function() {
  var currentCount = plusExtra.parentElement.querySelector('.count').innerText;
  var newCount = +currentCount + +1;
  plusExtra.parentElement.querySelector('.count').innerText = newCount;
  var colorMin = plusExtra.parentElement.querySelector('.extra-min');
  if (newCount !== 1) {
   colorMin.setAttribute("class", "change-extra min extra-min color");
  } else {
   colorMin.setAttribute("class", "change-extra min extra-min");
  }
  var extraPrice = plusExtra.parentElement.querySelector('.extraPrice').innerText;
  var extraPriceValue = extraPrice * newCount;
  calculatePlus(extraPriceValue);
 })
});


function calculatePlus(price) {
 //function here
 totalPrice.innerHTML = calculatedPrice;
}

function calculateMin(price) {
 //function here
 totalPrice.innerHTML = calculatedPrice;
}
.item {
 margin-bottom: 10px; 
 width: 120px;
 padding: 20px;
 border: 1px solid #C5C5C5;
}
.show-extra-container {
 display: -webkit-flex;
 display: flex;
 -justify-content: flex-start;
 justify-content: flex-start; 
 -webkit-align-items: center;
 align-items: center;
}
.extra-aantal {
 padding: 0px 14px;
 font-weight: 700;
 font-size: 16px;
}
.change-extra {
 font-weight: 700;
 font-size: 28px;
 color: #EC008C;
 cursor: pointer;
   -webkit-user-select: none;
  -ms-user-select: none; 
  user-select: none; 
}
.change-extra.min {
 background-color: #C5C5C5;
 width: 14px;
 height: 3px;
 margin-top: 3px;
 border-radius: 4px;
}
.change-extra.min.color {
 background-color: #EC008C;
}

#totalPrice {
 font-weight: 700;
}
 <div id="showextra1" class="item">
   <label class="col-form-label">Aantal personen</label>
   <div class="show-extra-container">
    <span class="extraPrice" style="display: none;">10</span>
    <div class="change-extra min extra-min"></div>         
    <div class="extra-aantal count">1</div>
    <div class="change-extra plus extra-plus">+</div>
  </div>  
 </div>
 
  <div id="showextra2" class="item">
   <label class="col-form-label">Aantal personen</label>
   <div class="show-extra-container">
    <span class="extraPrice" style="display: none;">5</span>
    <div class="change-extra min extra-min"></div>         
    <div class="extra-aantal count">1</div>
    <div class="change-extra plus extra-plus">+</div>
  </div>  
 </div>
 
 <div class="item">
  <div id="totalPrice"></div>
 </div>

所以这段代码非常适合我需要的东西。现在我只需要计算总价并设置innerHTML of totalPrice. 我正在考虑使用单独的函数calculateMin()和calculatePlus(). 但是我不知道如何编写这个计算总数的函数。有谁知道如何做到这一点？

标签： javascript

解决方案

试试这样：

var minExtras = document.querySelectorAll(".extra-min");
var plusExtras = document.querySelectorAll(".extra-plus");
var totalPrice = document.getElementById("totalPrice");
totalPrice.innerHTML = "Totaalprijs:   € ";
var calculatedPrice = 0;

//count initial price
Array.prototype.forEach.call(document.querySelectorAll('.show-extra-container'), function(container) {
  calculatedPrice += parseInt(container.querySelector('.count').innerText) * parseFloat(container.querySelector('.extraPrice').innerText);
});

totalPrice.innerHTML = "Totaalprijs:   € " + calculatedPrice;

Array.prototype.forEach.call(minExtras, function(minExtra) {
  minExtra.addEventListener('click', function() {
    var currentCount = minExtra.parentElement.querySelector('.count').innerText;
    if (currentCount !== "1") {
      var newCount = currentCount - 1;
      minExtra.parentElement.querySelector('.count').innerText = newCount;
    } else {
      return;
    };
    var colorMin = minExtra.parentElement.querySelector('.extra-min');
    if (newCount === 1) {
      colorMin.setAttribute("class", "change-extra min extra-min");
    }
    var extraPrice = minExtra.parentElement.querySelector('.extraPrice').innerText;

    //calculateMin: -1
    calculatedPrice -= parseFloat(extraPrice);
    totalPrice.innerHTML = "Totaalprijs:   € " + calculatedPrice;
  })
});

Array.prototype.forEach.call(plusExtras, function(plusExtra) {
  plusExtra.addEventListener('click', function() {
    var currentCount = plusExtra.parentElement.querySelector('.count').innerText;
    var newCount = +currentCount + +1;
    plusExtra.parentElement.querySelector('.count').innerText = newCount;
    var colorMin = plusExtra.parentElement.querySelector('.extra-min');
    if (newCount !== 1) {
      colorMin.setAttribute("class", "change-extra min extra-min color");
    } else {
      colorMin.setAttribute("class", "change-extra min extra-min");
    }
    var extraPrice = plusExtra.parentElement.querySelector('.extraPrice').innerText;

    //calculatePlus: +1
    calculatedPrice += parseFloat(extraPrice);
    totalPrice.innerHTML = "Totaalprijs:   € " + calculatedPrice;
  })
});
.item {
  margin-bottom: 10px;
  width: 120px;
  padding: 20px;
  border: 1px solid #C5C5C5;
}

.show-extra-container {
  display: -webkit-flex;
  display: flex;
  -justify-content: flex-start;
  justify-content: flex-start;
  -webkit-align-items: center;
  align-items: center;
}

.extra-aantal {
  padding: 0px 14px;
  font-weight: 700;
  font-size: 16px;
}

.change-extra {
  font-weight: 700;
  font-size: 28px;
  color: #EC008C;
  cursor: pointer;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.change-extra.min {
  background-color: #C5C5C5;
  width: 14px;
  height: 3px;
  margin-top: 3px;
  border-radius: 4px;
}

.change-extra.min.color {
  background-color: #EC008C;
}

#totalPrice {
  font-weight: 700;
}
<div id="showextra1" class="item">
  <label class="col-form-label">Aantal personen</label>
  <div class="show-extra-container">
    <span class="extraPrice" style="display: none;">10</span>
    <div class="change-extra min extra-min"></div>
    <div class="extra-aantal count">1</div>
    <div class="change-extra plus extra-plus">+</div>
  </div>
</div>

<div id="showextra2" class="item">
  <label class="col-form-label">Aantal personen</label>
  <div class="show-extra-container">
    <span class="extraPrice" style="display: none;">5</span>
    <div class="change-extra min extra-min"></div>
    <div class="extra-aantal count">1</div>
    <div class="change-extra plus extra-plus">+</div>
  </div>
</div>

<div class="item">
  <div id="totalPrice"></div>
</div>

  1. 计算每个项目的初始calculatedPrice( .count* ).extraPrice
  2. 单击-或+时，只需.extraPrice为该项目添加或删除一个
  3. returnminExtra如果计数已经最小为 1，则来自侦听器。

推荐阅读