javascript - 两个 div 之间共享的单个 onclick 函数未获取正确的值

Question

我对 JavaScript 和 jQuery 还很陌生。正如您在下面的示例中看到的，两个框都有一个同名的 onclick ，并且当您单击输出 h2 HTML 的每个框时都会发出警报。

我遇到的问题是，当您单击第二个框时，它会从第一个框(而不是第二个框)向 h2 发出警报。我想保留相同的函数和 onclick 名称，但根据单击的框获取一个值。

我认为解决方案涉及 this 关键字，但这就是我迷失的地方。

HTML:

<div class="divcont">
  <a onclick="getsub()">
    <h1 class="maintitle">First Title</h1>
    <h2 class="subtitle">First Subtitle</h2>
  </a>
</div>

<div class="divcont">
  <a onclick="getsub()">
    <h1 class="maintitle">Second Title</h1>
    <h2 class="subtitle1">Second Subtitle</h2>
  </a>
</div>

JavaScript:

function getsub(){
    var grabsubtitle = $('h2').html();
    alert(grabsubtitle);
};

http://codepen.io/anon/pen/LvgEK/

Answer 1

你的做法是对的。

不过，请避免使用内联 JavaScript，即在 HTML 中。很乱；最好将 HTML 和代码分开。因此，集中处理您的事件。这也带来了能够在回调中使用 this 的优势。

您的 h2 正在抓取 DOM 中找到的第一个 HTML，因为选择器与单击的链接无关。

试试这个:

$('.divcont').on('click', 'a', function() { 
    var grabsubtitle = $(this).siblings('h2').html();
    alert(grabsubtitle);
});