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

Question

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

获取其值

var currentID = e.target.id;

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

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

然后，我想总结一下新变量：price1 + price2 + price3等=总价格。

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

$('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
}