Javascript 如何动态创建可汇总的多个变量

我有一个变量，单击ID后通过

.innerText

var currentID = e.target.id;

我需要将这个变量的值，

currentID

，存储在一个新变量中，这个新变量的名称与它获取其值的ID相同

因此，如果用户单击ID为

price1

的元素，则价格为200。 应创建名为price1、值为200的新变量

然后，我想总结一下新的变量：price1+price2+price3等=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

以下是设计图：

---

我似乎无法理解这一点。。。我现在所做的只是得到一个变量，这意味着我不能求和。。。我想听听你对这个问题的看法

您的用例非常奇怪，我希望您的后端是安全的，并且制作良好

以下是一个潜在的解决方案：

<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
}

20
40
20
60
...
0
...
常数篮={}
函数addToBasket（事件）{
const{id，innerText}=event.target
const price=parseInt（innertText，10）
const product=basket[id]
常数计数=product.count | | 1
篮子[id]={
价格，
计数
}
}
函数getBasketTotalPrice=（）=>{
返回对象。键（篮）
.reduce（（合计，产品）=>total+product.count*product.price，0）
}
函数handleProductClick=（事件）=>{
addToBasket（事件）
const totalPrice=getBasketTotalPrice（）
document.querySelector（“#total price”）.innerHTML=totalPrice
}

如果您想在用户每次单击某个元素时创建一个新变量，您可以创建一个列表，并向该列表中添加一个新值或对象。但是，请提供更多的代码信息（HTML）来帮助您解决问题。我有两个问题：1、如何在id为“showprice2”的元素中显示总价。2：我需要这个可以切换，这样价格也可以从篮子中删除。。我不明白这是怎么回事。我添加了一张图片来展示我试图实现的目标。我需要的价格显示只有当框被选中，他们也可以取消选择。我更新了我的答案。如果你的网站是动态的，你应该考虑使用一个视图/组件框架LIB。对于初学者来说，最容易处理的是VueJS。稍后，当您熟悉Javascript时，React将是一个不错的选择。如果你真的想学习javascript，你可以观看FunFunction show（youtube）。记住Mozilla文档是最好的（首先检查数组和对象原型）。