Question

我有一个名为＆＃34; panel＆＃34;有多个子元素，每个都有一类海报。每张海报都是一张显示餐馆信息的卡片。我想针对用户点击的任何海报定位h2，无论他们点击哪个海报区域。我在面板上使用了事件委托，但我不确定如何定位h2。

HTML：

Host:

JS：

<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>

Answer 1

在javascript中使用 queryselector()

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

Demo

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库

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

3 个答案: