Привязать количество товара

282

20 февраля 2017, 19:11

Здравствуйте!

При добавлении товара в корзину, у пользователя имеется возможность задавать произвольное кол-во товара перед добавлением.

Мне же нужно следующее: по клику на кнопку "В корзину" конкретного товара - брать у него же количество товара, которое ввёл пользователь.

В моем случае кол-во товара добавляется всегда одного и того же товара, не зависимо на какой кликнул товар. Проверяю я это с помощью alert(). В примере все показано. Посмотрите, пожалуйста.

Подскажите, пожалуйста, как возможно решить эту проблему.

$('.add-to-cart').on('click', function(e) { 
  var that = $(this), 
    shows = parseInt(that.attr("data-show"), 10), 
    add = that.attr("data-text"), 
    qty = parseInt($('#qty').val(), 10); 
  alert(qty); 
  if (shows == 0) { 
    e.preventDefault(); 
    that.attr("data-show", "1"); 
    that.text(add); 
    that.closest('.catalog-tovarov').find('#mot').show(); 
  } 
});

.catalog-tovarov { 
  display: inline-block; 
  vertical-align: top; 
  text-align: center; 
  margin: 0 0 20px 11px; 
  width: 150px; 
  height: 230px; 
  padding: 1%; 
  transition: 0.4s 0.2s ease; 
  background: #cfcfcf; 
} 
 
.catalog-tovarov:hover { 
  box-shadow: 0 4px 9px 0 #CECECE; 
} 
 
.price { 
  margin-top: 120px; 
} 
 
#mot { 
  display: none; 
  text-align: right; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<div class="catalog-tovarov"> 
    <div id="mot"><img width="30px" src="http://sparkysite.ru/small/check/check03/scheck264.png" /></div> 
     <div class="price"> 
        <input id="qty" type="text" name="quant" value="3" /> 
        <span>444 руб.</span><br/> 
        <a class="add-to-cart" data-price="10000" data-show="0" data-text="Перейти в корзину" href="#">В корзину</a> 
    </div>  
 </div> 
 <div class="catalog-tovarov"> 
     <div id="mot"> 
        <img width="30px" src="http://sparkysite.ru/small/check/check03/scheck264.png" /> 
    </div> 
     <div class="price"> 
       <input id="qty" type="text" name="quant" value="2" /> 
        <span>444 руб.</span><br/> 
        <a class="add-to-cart" data-price="10000" data-show="0" data-text="Перейти в корзину" href="#">В корзину</a> 
    </div>  
 </div> 
 <div class="catalog-tovarov"> 
    <div id="mot"> 
        <img width="30px" src="http://sparkysite.ru/small/check/check03/scheck264.png" /> 
    </div> 
    <div class="price"> 
        <input id="qty" type="text" name="quant" value="6" /> 
        <span>444 руб.</span><br/> 
        <a class="add-to-cart" data-price="10000" data-show="0" data-text="Перейти в корзину" href="#">В корзину</a> 
    </div>    
 </div>

Answer 1

Первое - не используйте одинаковые id на странице, вместо этого используйте классы.

Второе - у вас ни как не обозначалось, в каком же блоке искать количество, в вашем случае можно делать .siblings(), но это не рекомендуется, т.к. тогда слишком большая зависимость от верстки, лучше найти начало блока и в нем нужный элемент, я сделал так, чтобы изменять ваш код поменьше.

Третье, я исправлять не стал, но к data не нужно делать доступ через attr.

$('.add-to-cart').on('click', function(e) { 
  var that = $(this), 
    shows = parseInt(that.attr("data-show"), 10), 
    add = that.attr("data-text"), 
    qty = parseInt(that.siblings('.qty').val(), 10); 
  alert(qty); 
  if (shows == 0) { 
    e.preventDefault(); 
    that.attr("data-show", "1"); 
    that.text(add); 
    that.closest('.catalog-tovarov').find('.mot').show(); 
  } 
});

.catalog-tovarov { 
  display: inline-block; 
  vertical-align: top; 
  text-align: center; 
  margin: 0 0 20px 11px; 
  width: 150px; 
  height: 230px; 
  padding: 1%; 
  transition: 0.4s 0.2s ease; 
  background: #cfcfcf; 
} 
 
.catalog-tovarov:hover { 
  box-shadow: 0 4px 9px 0 #CECECE; 
} 
 
.price { 
  margin-top: 120px; 
} 
 
.mot { 
  display: none; 
  text-align: right; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<div class="catalog-tovarov"> 
    <div class="mot"><img width="30px" src="http://sparkysite.ru/small/check/check03/scheck264.png" /></div> 
     <div class="price"> 
        <input class="qty" type="text" name="quant" value="3" /> 
        <span>444 руб.</span><br/> 
        <a class="add-to-cart" data-price="10000" data-show="0" data-text="Перейти в корзину" href="#">В корзину</a> 
    </div>  
 </div> 
 <div class="catalog-tovarov"> 
     <div class="mot"> 
        <img width="30px" src="http://sparkysite.ru/small/check/check03/scheck264.png" /> 
    </div> 
     <div class="price"> 
       <input class="qty" type="text" name="quant" value="2" /> 
        <span>444 руб.</span><br/> 
        <a class="add-to-cart" data-price="10000" data-show="0" data-text="Перейти в корзину" href="#">В корзину</a> 
    </div>  
 </div> 
 <div class="catalog-tovarov"> 
    <div class="mot"> 
        <img width="30px" src="http://sparkysite.ru/small/check/check03/scheck264.png" /> 
    </div> 
    <div class="price"> 
        <input class="qty" type="text" name="quant" value="6" /> 
        <span>444 руб.</span><br/> 
        <a class="add-to-cart" data-price="10000" data-show="0" data-text="Перейти в корзину" href="#">В корзину</a> 
    </div>    
 </div>

Создание интернет-магазина спортивных товаров в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Firefox Add-ons - Рандомный выбор строки из файла

Можно ли как-то сделать рандомный выбор строки из файла для расширения Firefox?

263

javascript

JavaScript метод sort() и Math.random()

Изучаю JavaScript, метод sort() Все в общем-то понятно было, но далее я встретил пример из учебника с методом Mathrandom() :

540

javascript

Добавление мини-игр на сайт [требует правки]

Добрый день! У меня есть сайт, на который я хочу добавить парочку мини-игрНа сайте есть баланс, так вот, как можно реализовать игру "Монетка"...

284

javascript

Вывод номера по выбору города

Как можно реализовать, чтобы при выборе определенного города, выводился определенный номер ? Я понимаю что через JS, может кто с кодом помочьЗаранее...

598