Как считать цену при нажатии на div?

Question

[Mesuti]

Привет!
Делаю пройстой калькулятор, как заставить его считать data-price="XXX" при выборе цвета?
Если снова цвет нажимаю, галочка пропадает и цена убирается
Песочница jsFiddle

Сейчас при нажатии на div с классом .color добавляется класс checked, чтобы ставилась галочка.
Как еще и прибавлять в итоговую цену значение доп.атрибута?

//выбираем нужные элементы
    var color = document.querySelectorAll('.color');

    //перебираем все найденные элементы и ставим галочку при клике
    $(function(){
    $(".color").on("click", function(){
        this.classList.toggle('checked');

       // Это пробовал задать значение переменной и прибавить в итоговую цену, но не получается
        var colorPrice = this.dataset.price;
    });
    });

   // для упрощения задачи привел пример как берется цена из доп.атрибута
    var black = document.getElementById('black').dataset.price;
    var blue = document.getElementById('blue').dataset.price;
    var green = document.getElementById('green').dataset.price;
    var red = document.getElementById('red').dataset.price;

Comments

[Сергей Соколов]

Сейчас можно выбрать несколько цветов – тогда цена суммируется? Скорее всего, вы захотите позволить выбирать только один цвет или ни одного.

Answer 1

[0xD34F]

По клику на .colors вызывайте функцию пересчёта:

$('.colors').on('click', '.color', function() {
  $(this).toggleClass('checked');
  calculate();
});

В самой функции добавьте обход .colors .checked и суммирование их data-price:

total += $('.colors .checked', this)
  .get()
  .reduce((acc, n) => acc + +n.dataset.price, 0);

Comments

[Mesuti]

Спасибо!
Гениальный человек, уже не первый раз помогаете