根据单击的父元素选择 h2 元素

Question

我有一个名为"panel"的div，其中包含多个子元素，每个子元素都有一类海报。每张海报都是一张显示餐厅信息的卡片。我想针对用户点击的任何海报定位 h2，无论他们点击海报的哪个区域。我在面板上使用事件委派，但我不确定如何定位 h2。

.HTML：

<div class="panel">
  <div class="poster">
    <div class="wrapper">
      <p class="time">6-7:30PM</p>
      <div class="inner-wrapper">
        <h2 class="restaurant-title">Restaurant A</h2>
        <h3 class="deal-description">bla bla bla</h3>
      </div>
    </div>
  </div>
    <div class="poster">
    <div class="wrapper">
      <p class="time">2-4:30PM</p>
      <div class="inner-wrapper">
        <h2 class="restaurant-title">Restaurant B</h2>
        <h3 class="deal-description">bla bla bla</h3>
      </div>
    </div>
  </div>
    <div class="poster">
    <div class="wrapper">
      <p class="time">1-5:30PM</p>
      <div class="inner-wrapper">
        <h2 class="restaurant-title">Restaurant C</h2>
        <h3 class="deal-description">bla bla bla</h3>
      </div>
    </div>
  </div>
</div>

.JS：

var panel = document.querySelector(".panel");
panel.addEventListener("click", handleClick);

Answer 1

在 JavaScript 中使用 queryselector（）

 function handleClick(){
     var h2=this.querySelector("h2");
}

演示

Answer 2

使用 jquery：

$(".panel").click(function(){
   var h2 = $(this).find('h2');
});

Answer 3

试试这个：

$(document).ready(function(){
    $(".poster").click(function(){
       var h2 = $(this).children(".restaurant-title");    
        //alert(h2.context.innerText);
    })
})

jsfiddle上的例子：https://jsfiddle.net/ar1xawku/不要忘记在代码中包含jquery库

Answer 4

所以我为此想出了一个解决方案，并想我会分享：

$(".poster").click(function(){
    var h2 = $(this).find('h2');
    var restaurantTitle = (h2["0"].innerText);