Question

我还是JavaScript和jQuery的新手。正如您在下面的示例中所看到的，当您单击输出h2的HTML的每个框时，两个框都有onclick具有相同的名称和警报。

我遇到的问题是，当您单击第二个框时，它会从第一个框中提醒h2，而不是第二个框。我想保留相同的函数和onclick名称，但根据点击的任何一个框得到一个值。

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

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

您可以这样做的一种方法是将对a元素的引用传递给getSub函数：

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

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

然后在传递的元素中找到h2元素：

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

这里是fork of your code

Answer 2

你说的是正确的。

但是，请避免在HTML中使用内联JavaScript。这很乱;更好地保持HTML和代码分离。因此，集中处理您的事件。这也带来了在回调中使用this的优势。

您的h2正在抓取在DOM中找到的第一个HTML，因为选择器不是所点击链接的上下文。

试试这个：

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

单个onclick函数在两个div之间共享，而不是抓取正确的值

2 个答案: