Получение значения в родительском элементе нажатой кнопки

Question

Я новичок в Jquery и пытаюсь получить доступ к родительскому элементу нажатой кнопки. Это связано с тем, что я генерирую div динамически, поэтому я хочу, чтобы соответствующий щелчок по кнопке применялся к правильному div.

После доступа к родительскому элементу нажатой кнопки я хочу получить доступ к нескольким входным значениям внутри него.
Я получаю сообщение об ошибке в консоли: [DOM] Found 2 elements with non-unique id #quantity потому что у меня есть for l oop который производит похожие div с уникальным количеством.

Я пробовал использовать document.getElementById("onekg").value; Но он работает только для первого элемента, а не для последующих элементов.

    <% cakes.forEach(cake => { %>
        <div class="item-cart">
         <input type="hidden" name="onekg" id="onekg" value="1000">
         <input id="quantity" type="text" name="quantity" value="1">
         <button id="plus_btn" class="plus-btn qbtn" type="button" name="button">+</button>
       </div>
    <% }) %>

JQuery

$(".plus-btn").click(function (event) {
  event.preventDefault();
  event.stopPropagation();
  var currentItem = $(event.target).parents('.item-cart');
  console.log(currentItem);
  var onekg = document.getElementById("onekg").value;
  var quantity = document.getElementById("quantity").value;
  console.log(quantity + onekg)
})

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

Answer 1

Вы можете использовать следующий код

$(".plus-btn").click(function (event) {
    var parent = $(this).closest('.item-cart');
});

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

Таким образом, ваш код будет примерно таким, как показано ниже, в соответствии с вашим кодом.

$(".plus-btn").click(function (event) {
    var parent = $(this).closest('.item-cart');
    var onekg = parent.find("#onekg").val();
    var quantity = parent.find("#quantity").val();
});

Но вы должны имейте в виду, что на странице не должно быть идентификаторов более одного раза. Поэтому я предлагаю вам изменить один кг и количество на класс и переписать код следующим образом:

<input type="hidden" name="onekg" class="onekg" value="1000">
<input class="quantity" type="text" name="quantity" value="1">

и изменить ваш код jQuery на следующий .

$(".plus-btn").click(function (event) {
    var parent = $(this).closest('.item-cart');
    var onekg = parent.find(".onekg").val();
    var quantity = parent.find(".quantity").val();
});