Как динамически создавать несколько переменных, которые можно суммировать - PullRequest
Новая
       8

Как динамически создавать несколько переменных, которые можно суммировать

0 голосов
/ 30 августа 2018

У меня есть переменная, которая получает свое значение после щелчка по идентификатору, через .innerText

var currentID = e.target.id;

Мне нужно, чтобы значение этой переменной, currentID, было сохранено в новой переменной, которая названа так же, как и идентификатор, для которого она получила свое значение.

Итак, если пользователь щелкает элемент с идентификатором price1, и цена составляет 200. Должна быть создана новая переменная с именем price1 со значением 200.

Затем я хочу суммировать новые переменные: цена1 + цена2 + цена3 и т. Д. = Общая цена.

Вот что я сейчас делаю: 

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

Вот изображение дизайна:

Here's an image of the design

Кажется, я не могу понять это ... То, что я сейчас делаю, приводит к тому, что у меня есть 1 переменная, что означает, что я ничего не могу подвести итог ... Мне бы очень хотелось, чтобы вы взглянули на этот вопрос!

1 Ответ

0 голосов
/ 30 августа 2018

Ваш вариант использования довольно странный. Надеюсь, ваш бэкэнд надежно защищен.

Вот потенциальное решение: 

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