如何动态创建多个可以总结的变量

Question

我有一个变量，一旦点击 ID 就会获取它的值，通过 .innerText

var currentID = e.target.id;

我需要将此变量的值 currentID 存储在一个新变量中，该变量的名称与其获取值的 ID 相同。

因此，如果用户点击 ID 为 price1 的元素，价格为 200。应创建一个名为 price1 且值为 200 的新变量。

然后，我想总结新的变量：price1+price2+price3 etc = totalprice.

这就是我现在正在做的事情：

$('div.unselected-option').click(function(e) {
   $(this).toggleClass("selected-option unselected-option")

if ($(this).hasClass("selected-option")) {
   var currentID = e.target.id;
   console.log(currentID);
   var price1 = document.getElementById(currentID).innerText

   var finalprice
   finalprice = +price1;
   document.getElementById("showprice2").innerHTML = finalprice

这是设计图片：

我似乎无法弄清楚...我现在正在做的只是导致有 1 个变量，这意味着我无法总结任何东西...我希望您对这个问题有看法！

Answer 1

你的用例很奇怪我希望你的后端安全且制作精良。

这是一个可能的解决方案：

<div id="a1" onclick="handleProductClick">20</div>
<div id="a2" onclick="handleProductClick">40</div>
<div id="b1" onclick="handleProductClick">20</div>
<div id="b2" onclick="handleProductClick">60</div>
...
<div id="total-price">0</div>
...
const basket = {}

function addToBasket(event) {
  const { id, innerText } = event.target
  const price = parseInt(innertText, 10)
  const product = basket[id] 
  const count = product.count || 1
  basket[id] = {
    price,
    count
  }
}

function getBasketTotalPrice = () => {
  return Object.keys(basket)
   .reduce((total, product) => total + product.count * product.price, 0)
}

function handleProductClick = (event) => {
  addToBasket(event)
  const totalPrice = getBasketTotalPrice()
  document.querySelector('#total-price').innerHTML = totalPrice
}

如何动态创建多个可以总结的变量

How to create multiple variables dynamically that can be summed up

javascript

variables

dynamic

price