0

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

Интересует следующее: Я получаю с карточки товара стоимость из value из тега input. Все отлично работает.

<div class="product-kartochka">
   <input type="hidden" value="<?=$goods['price']?>" id="pricee" />
   <a class="add-to-cart" href="#">В корзину</a>
</div>

JS:

$('.add-to-cart').on('click', function (e) {
    var pricee = ('#pricee').val();
    parseInt(pricee,10);
    ...//код
    ...//код
    alert(pricee);
});

После клика на кнопку с классом add-to-cart - выводится в окне стоимость этого товара. Но это только работает с карточки товара, если перейти в каталог товаров и нажать на кнопку с классом add-to-cart, то выводится цена товара не того на который кликнул, то есть всегда одна и та же цена показывается при клике на разные товары. Как я понял js не понимает на какой товар я кликнул. С этим я решил проблему. Для карточки товара:

<div class="product-kartochka">    
    <span><?=$goods['price']?> руб.</span>
    <a class="add-to-cart" href="#">В корзину</a>
</div>

Для каталога товаров:

<div class="catalog-tovarov">
    <span><?=$goods['price']?> руб.</span>
    <a class="add-to-cart" href="#">В корзину</a>
</div>

JS:

$('.add-to-cart').on('click', function (e) {
    var pricee=$(this).closest(".product-kartochka, .catalog-tovarov").find("span").text();
      parseInt(pricee,10);
    ...//код
    ...//код
    alert(pricee);
});

То есть теперь значение берется не из value, а просто из span, в котором обычно посетитель будет видеть стоимость товара.

catalog-tovarov - class для каталога товаров (в нём помещена цена)    
product-kartochka - class для карточки товара (в нём помещена цена)

Но так не хотелось бы, т.к. обращение идёт к конкретному классу и затем к span. Бывает так что, через какое-то время могут добавить в верстке еще один span перед ценой и тогда уже значение будет браться не то. Можно ли как-то обращаться тогда уж таким же способом, только к конкретному id, например этого же span, чтобы при случае 2-х span-ов, js понимал от куда брать значение. Или может быть это можно решить другим путем? Например брать также из value из input. Надеюсь на Вашу помощь:)

2 ответа 2

1

$('.add-to-cart').on('click', function (e) {
      var pricee = $(this).data("price");
          parseInt(pricee,10);
      alert(pricee);
  e.preventDefault();
 });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="catalog-tovarov">
    <span>10000 руб.</span>
    <a class="add-to-cart" data-price="10000" href="#">В корзину</a>
 </div>

можно добавлять в кнопку добавить в корзину data-price="Цена" и брать от туда

4
  • Огромное Вам спасибо!:) То, что нужно! Спасибо! 6 фев 2017 в 11:34
  • Здравствуйте! Подскажите, пожалуйста, вот такой ещё вопрос. Как по клику на кнопку "В корзину" конкретного товара - вывести ему же галочку, будто товар успешно добавлен? Пробовал через data-show="0" сравнивать - не работает. Вот пример: ссылка 7 фев 2017 в 10:34
  • Создайте новый вопрос, здесь уже нельзя писать не по теме вопроса, есть много факторов которые вы должны вообще учесть, не только показать что товар добавлен. Создадите вопрос там расскажу что нужно учитывать
    – Karalahti
    7 фев 2017 в 16:26
  • Готово. Ссылка 7 фев 2017 в 17:09
1

Внутри функции используйте $(this), или e.currenttarget (Vanilla js). Тогда будете работать с нужным объектом. Пример, на основе первого кусочка:

$('.add-to-cart').on('click', function (e) {
  var wrap = $(this).closest('.product-kartochka'); // обертка, в которое есть кнопка и инпут с ценой
  console.log(wrap.children('input').val());
  // у обертки ищем инпут и получаем его value
  //код
  //код
});
4
  • Спасибо, конечно, но это тоже не выход. Так как input-ов может быть несколько. Опять же здесь случай, как со span-ами. Ответ уже дали. 6 фев 2017 в 12:00
  • Это решение работает для любого количества инпутов, если в диве "add-to-cart" несколько инпутов, покажите пример, я на нем покажу решение 7 фев 2017 в 9:32
  • согласен работает. Но js надо понимать из какого тогда input брать значение, если их несколько. Спасибо, не стоит. Решил вопрос через data-price="...". 7 фев 2017 в 10:37
  • Скорее надо тогда обращаться к input по конкретному id. <input type="text" value="1" id="..." /> 7 фев 2017 в 10:43

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.