Получить значение value из тега input

Дмитрий

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

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

<div class="product-kartochka">
   
   <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 ответа

Дмитрий

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

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


Дмитрий

Внутри функции используйте $(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
  //код
  //код
});

licensed under cc by-sa 3.0 with attribution.