Блог

Главная - Вопросы по программированию - Почему не работает счетчик приращения моей тележки?

Почему не работает счетчик приращения моей тележки?

#javascript #html #jquery #cart

Вопрос:

Я хочу, чтобы количество увеличивалось на панели навигации при каждом нажатии кнопки «добавить в корзину» на товар, но я не понимаю, почему мой код не работает, когда я нажимаю кнопку «Добавить в корзину», счетчик в настоящее время не увеличивается. Если бы кто-нибудь мог сказать мне, чего мне не хватает, или дать мне лучшее решение того, что у меня есть, я был бы признателен, спасибо!

 $('.addCart').on('click', function() {
  console.log(completedIncrements.indexOf(this.id));

  if (completedIncrements.indexOf(this.id) == -1) {
    var count = parseInt($("#count").text());
    $("#count").html(count   1);

    completedIncrements.push(this.id);
  }
}) 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="navbar">
  <a href="shoppingcart.html" class="cart">Shopping Cart (<span id="count">0</span>)</a>
  <a href="shop.html" class="right">Shop</a>
  <a href="contactus.html" class="right">Contact Us</a>
</div>
<a href="shoe1.html"><img id="shoe3" img src="images/shoe1.jpg" alt="shoe1">
<div id="cart1" class="addCart" href="#"><button>Add to cart</button></div>
<a href="shoe2.html"><img id="shoe4" img src="images/shoe2.jpg" alt="shoe2">
<div id="cart2" class="addCart" href="#"><button>Add to cart</button></div>

Комментарии:

1. Где это completedIncrements определено? Кроме того, ваш HTML-код выглядит искаженным. Вам не хватает ваших конечных тегов привязки ( </a> ).

2. ну, ваш код добавляет его только в том случае, если товара нет в корзине. И вы добавляете идентификатор кнопки в массив, а не идентификатор элемента.

Ответ №1:

Я только что проверил твой код. completeIncrements выдает ошибку в консоли и предотвращает выполнение вашей логики. Пожалуйста, предоставьте информацию об этом или используйте приведенный ниже код для ее решения.

 $('.addCart').on('click', function() {

    var count = parseInt($("#count").text());
    $("#count").html(count   1);

   
})

Ответ №2:

 $('.addCart').on('click', function(e) {
e.preventDefault();
var completedIncrements =0;
 
  
    var count = parseInt($("#count").text());
    $("#count").html(count   1);

   
}); 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="navbar">
  <a href="shoppingcart.html" class="cart">Shopping Cart (<span id="count">0</span>)</a>
  <a href="shop.html" class="right">Shop</a>
  <a href="contactus.html" class="right">Contact Us</a>
</div>
<a href="shoe1.html"><img id="shoe3" img src="images/shoe1.jpg" alt="shoe1">
<div id="cart1" class="addCart" href="#"><button>Add to cart</button></div>
<a href="shoe2.html"><img id="shoe4" img src="images/shoe2.jpg" alt="shoe2">
<div id="cart2" class="addCart" href="#"><button>Add to cart</button></div>

Используйте функцию предотвращения по умолчанию, чтобы ссылка не обновлялась, а также удалялся ненужный код

 $('.addCart').on('click', function(e) {
e.preventDefault();      
    var count = parseInt($("#count").text());
    $("#count").html(count   1);       
}); 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Метки: