Javascript Jquery-获取容器中最靠近单击按钮的元素

我使用php从mongodb数据库获取数据，并将其显示为html元素。使用jquery，我希望在我拥有的每个项目上单击一个按钮，并获取所单击项目的元素标题和console.log

这是包含已创建元素的产品容器

<div class="category__container">
          <div class="category__center">
            <?php 
                //get products and display them as html 
                $cursor = $collection->find();
              foreach ($cursor as $doc){
                echo 
                  " <div class= 'product category__products'>
                        <div class='product__header'>
                          <img src = ".$doc["image"]." />
                        </div>  
                        <div class= 'product__footer'>
                          <h2> ".$doc["title"]." </h2>                              
                          <div class= 'product__price'>
                              <h4> $".$doc["price"]." </h4>
                          </div>
                          <button type='button' class='product__btn'>Add To Cart</button>
                        </div>
                    </div>
                  ";

              }  

            ?>
          </div>
        </div>

文档就绪时的My jquery事件：

$('.category__center').on('click' , '.product__btn' ,(e)=>{
  //this is where I want to get the <h2> title from '.product__footer'
  

})

非常感谢您的帮助。

您可以使用closest.product\u footer.findh2获取h2标签值

演示代码：

$'.category\uuuu center'。点击，'.product\uu btn'，e=>{ //获取最接近的产品页脚，然后是h2文本 console.log$e.target.closest.product\uu footer.findh2.text console.log$e.target.closest.product.find'img.attr'src' } Abs12 123 添加到购物车 Abcd 12 添加到购物车 您可以使用最近的.product\u footer.findh2获取h2标记值

演示代码：

$'.category\uuuu center'。点击，'.product\uu btn'，e=>{ //获取最接近的产品页脚，然后是h2文本 console.log$e.target.closest.product\uu footer.findh2.text console.log$e.target.closest.product.find'img.attr'src' } Abs12 123 添加到购物车 Abcd 12 添加到购物车

---

对每个产品使用自定义属性，如-

---

添加到购物车对每个产品使用自定义属性-

---

我只有一个问题。如果我尝试var pic=$e.target.closest.product\uu header.findimg.attr'src.text；我找不到图像src和console.log它作为一个字符串我没有定义我的代码看一看：product\uu页眉是product\uu页脚的兄弟，这就是为什么它不起作用。阅读会有帮助的。非常感谢。在每个变量中使用.product而不是.product\u footer不是更好的做法吗？这取决于您需要获得的部分。我已经向您展示了执行上述操作的一种方法，还有许多其他方法可以获得相同的结果。请通过这个链接一定会帮助你理解。我只有一个问题。如果我尝试var pic=$e.target.closest.product\uu header.findimg.attr'src.text；我找不到图像src和console.log它作为一个字符串我没有定义我的代码看一看：product\uu页眉是product\uu页脚的兄弟，这就是为什么它不起作用。阅读会有帮助的。非常感谢。在每个变量中使用.product而不是.product\u footer不是更好的做法吗？这取决于您需要获得的部分。我已经向您展示了执行上述操作的一种方法，还有许多其他方法可以获得相同的结果。请通过这个链接一定会帮助你理解。

$(document).on("click",".product__btn", function(){
   let title = $(this).closest(".product__footer").find("> h2").text().trim();
   console.log(title);
});