Как я могу добавить цену в корзину, как переключатель?

Question

У меня есть код, с которым мне нужна помощь. Я хочу, чтобы кнопки A и B были похожи на опцию для моей корзины, и при нажатии на них их цена должна быть добавлена ​​к моей общей цене, но она должна быть похожа на переключатель (цветная машина). A или цвет B), если я нажму на B, к общей цене должна быть добавлена ​​только цена B. вот мой код

<div id="banner-message">
 <button>A</button>
 <button>B</button>
</div>


$(".btn").click(()=>{
let extraprice = this.attr("data-price");

let total = $("#total-price").text();

total + extraprice;
})

Answer 1

В вашем коде есть несколько проблем:

1. Сначала объявите сумму как глобальную переменную (вне функции обработчика события щелчка).
2. Функция стрелки (=>)не имеет своего собственного this, используйте обычный синтаксис функции.
3. Сумма текста имеет тип string, преобразуйте сумму в число, прежде чем добавлять их
4. Наконец установите total-цена с использованием text()

let total = Number($("#total-price").text());
$(".btn").click(function(){
  let extraprice = Number($(this).data("price"));
  $('#total-price').text(total + extraprice);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="banner-message">
 <button class="btn" data-price="210">A</button>
  <button class="btn" data-price="200">B</button>
  <br>
  <h1>
    Your total price is <span id="total-price">1000</span> $
  </h1>
</div>