Я использую php для извлечения данных из базы данных mongodb и отображения их в виде элементов html. С помощью jquery я хочу нажимать кнопку на каждом элементе, который у меня есть, и получать заголовок элемента и консоли ...

1
vasilis 123 16 Янв 2021 в 16:50

3 ответа

Лучший ответ

Вы можете использовать closest(".product__footer").find("h2"), чтобы получить значение тега h2.

Демо-код :

$('.category__center').on('click', '.product__btn', (e) => {
  //get closest product footer then h2 text
  console.log($(e.target).closest(".product__footer").find("h2").text())
  console.log($(e.target).closest(".product").find('img').attr('src'))
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="category__container">
  <div class="category__center">
    <div class='product category__products'>
      <div class='product__header'>
        <img src="abc.png" />
      </div>
      <div class='product__footer'>
        <h2> Abs12</h2>
        <div class='product__price'>
          <h4>123 </h4>
        </div>
        <button type='button' class='product__btn'>Add To Cart</button>
      </div>
    </div>
    <div class='product category__products'>
      <div class='product__header'>
        <img src="deded.png" />
      </div>
      <div class='product__footer'>
        <h2> Abcd </h2>
        <div class='product__price'>
          <h4>12 </h4>
        </div>
        <button type='button' class='product__btn'>Add To Cart</button>
      </div>
    </div>
  </div>
</div>
1
Swati 16 Янв 2021 в 14:10

Используйте настраиваемый атрибут с каждым product__btn, например:

<button type='button' class='product__btn' data-product='".$doc["title"]."'>Add To Cart</button>

Теперь в событии щелчка в jQuery используйте -

$('.category__center').on('click' , '.product__btn' ,(e)=>{
  var productName = $(this).attr('data-product');
})
1
Yash Kejriwal 16 Янв 2021 в 13:57
$(document).on("click",".product__btn", function(){
   let title = $(this).closest(".product__footer").find("> h2").text().trim();
   console.log(title);
});
0
Karthick 16 Янв 2021 в 14:56
65750399