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

488

07 февраля 2017, 19:12

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

Интересует следующее: Я получаю с карточки товара стоимость из 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. Надеюсь на Вашу помощь:)

Answer 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="Цена" и брать от туда

Answer 2

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