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

Question

[Кристина]

https://codepen.io/KrisIris/pen/rwJwLW
Друзья!
Не сильна в js.
Как сделать, чтобы у заголовка «Корзина» (в шапке) значение «0» менялось на количество добавленных товаров, т.е. на количество нажатий кнопки «Купить»?
Благодарю!

Comments

[Александр Фёдорцев]

Зависит от того, где у вас хранится содержимое корзины. К нему надо обращаться, и считать купленные товары( sum() ). Потом всё просто:

$('div[class="menu"] p[class="text-right"]').text('(${sum()}) Корзина');

Answer 1

[Владимир]

Присвоить блоку, в котором будет отображаться кол-во, id и увеличивать содержимое блока на 1 при каждом нажатии "Купить"

<div id="shopping-cart">
0
</div>
<a id="buy">Купить</a>


<script>
$("a#buy").on("click", function(){
  $(this).preventDefault();
  var quantity = parseInt( $("#shopping-cart").html() );
  $("#shopping-cart").html( quantity++ );
})

</script>

Comments

[Кристина]

Здравствуйте!
Спасибо!
Но что-то не работает(

[Владимир]

https://jsfiddle.net/mgt4ch0s/2/

[Кристина]

Владимир:
Все работает!)

[Кристина]

KrisIris:
Владимир, а чтобы с сохранением скобочек возле количества - можно сделать?

[Владимир]

Так что ли - https://jsfiddle.net/mgt4ch0s/4/ ?

[Кристина]

Владимир, здравствуйте!
А как доработать Ваш скрипт, чтобы изначально на кнопке корзины было написано:
В корзине 0 товаров
А потом в корзине 1 товар, 2 товара и так далее.
Спасибо!

[Владимир]

Кристина, добрый день!

Это уже сделано:

<div id="shopping-cart">
0
</div>

Если критично наличие слова "товар", то самое простое решение:

<div id="shopping-cart">
Товаров в корзине: <span id="quantity">0</span>
</div>

... и далее:

<script>
$("a#buy").on("click", function( e ){
  e.preventDefault();
  var quantity = parseInt( $("#quantity").html() );
  $("#quantity").html( quantity++ );
})
</script>