jQuery | Обработка нажатия одной из множества кнопок

Question

В html документе выводим через цикл много карточек с кнопкой "купить" У каждой такой кнопки есть атрибут с уникальной ценой. Необходимо что-бы при нажатии на кнопку например 3-й карточки мы могли получить именно атрибут 3-й карточки.

Кнопка:

<button class="butt card-btn" item-cost="{{$goodsUnit->price}}">
   {{ $goodsUnit->price }}
</button>

jQuery

 $('.card-btn').click( function () {
    let itemCost = $('.card-btn').attr('item-cost');
    console.log(itemCost);
});

При таком подходе он просто выберет первую попавшуюся кнопку, не важно на какую я нажму, он выведет цену самой первой.
Собственно: как вывести атрибут нажатой кнопки?

Спасибо.

Answer 1

Используйте ключевое слово this (статья про него) :

$('.card-btn').click( function () {
    let itemCost = $(this).attr('item-cost');
    console.log(itemCost);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="butt card-btn" item-cost="1123">
   1123
</button>
<button class="butt card-btn" item-cost="4456">
   4456
</button>

БЛОГ НА HUSL

jQuery | Обработка нажатия одной из множества кнопок

Ответы (1 шт):