javascript - 从同一个链接点击取不同的id

Question

在一个页面的源代码中，页面的不同部分有4次唯一的外部链接。

我想触发用户点击了哪个点击，因为它之前的某行有一个 id，如果用户点击特定链接，我想将它保存到一个变量中。

一个简单的例子:

<div class="mydiv">
<p id="id1">test<p>
<p></p>
<p></p>
<p></p>
<div> <a href="www.outboundlink.com"> click </a> </div>
</div>

<div class="mydiv">
<p id="id2">test<p>
<p></p>
<p></p>
<p></p>
<div> <a href="www.outboundlink.com"> click </a> </div>
</div>

<div class="mydiv">
<p id="id3">test<p>
<p></p>
<p></p>
<p></p>
<div> <a href="www.outboundlink.com"> click </a> </div>
</div>

如何检查用户是否点击了 ID 为 id2 的第二个链接并将其保存到变量等？在我的页面中还有其他 href，但我只想检查具体情况。

Answer 1

您可以很容易地处理这些 click 事件:

var list = document.querySelectorAll('a[href="www.outboundlink.com"]');
var index;
for (index = 0; index < list.length; ++index) {
    list[index].addEventListener("click", handleClick, false);
}

然后在handler中，反复使用parentNode找到.mydiv，然后找到id为:

的段落

function handleClick() {
    var mydiv = this.parentNode;
    var p;
    while (mydiv && !/\bmydiv\b/.test(mydiv.className)) {
        mydiv = mydiv.parentNode;
    }
    if (mydiv) {
        p = mydiv.querySelector("p[id]");
        if (p) {
            // Use p.id here, it's the ID
        }
    }
}

请注意，一旦您完成了点击处理，您所在的页面将被拆除并替换为点击链接后的结果。因此，如果您获取变量的 ID，则需要立即对其执行一些操作(例如将其放入本地存储中)。

另请注意，您的链接可能无效，href="www.outboundlink" 是站点内的相对 链接。它需要 http://、https:// 或 // 才能转到另一个站点。

实例:

var list = document.querySelectorAll('a[href="www.outboundlink.com"]');
var index;
for (index = 0; index < list.length; ++index) {
  list[index].addEventListener("click", handleClick, false);
}

function handleClick(e) {
  var mydiv = this.parentNode;
  var p;
  while (mydiv && !/\bmydiv\b/.test(mydiv.className)) {
    mydiv = mydiv.parentNode;
  }
  if (mydiv) {
    p = mydiv.querySelector("p[id]");
    if (p) {
      // Use p.id here, it's the ID
      alert("The ID is " + p.id);
    }
  }
  e.preventDefault(); // Just for demonstration purposes
}

<div class="mydiv">
  <p id="id1">test
    <p>
      <p></p>
      <p></p>
      <p></p>
      <div> <a href="www.outboundlink.com"> click </a> 
      </div>
</div>

<div class="mydiv">
  <p id="id2">test
    <p>
      <p></p>
      <p></p>
      <p></p>
      <div> <a href="www.outboundlink.com"> click </a> 
      </div>
</div>

<div class="mydiv">
  <p id="id3">test
    <p>
      <p></p>
      <p></p>
      <p></p>
      <div> <a href="www.outboundlink.com"> click </a> 
      </div>
</div>

---

像许多 DOM 遍历一样，使用像 jQuery 这样的 DOM 包装器库可以使这变得更加简单:

$('a[href="www.outboundlink.com"]').on("click", function() {
    var id = $(this).closest(".mydiv").find("p[id]").attr("id");
    alert("The ID is " + id); // will be undefined if not found
});

$('a[href="www.outboundlink.com"]').on("click", function() {
  var id = $(this).closest(".mydiv").find("p[id]").attr("id");
  alert("The ID is " + id);
  return false; // Just for demonstration purposes
});

<div class="mydiv">
  <p id="id1">test
    <p>
      <p></p>
      <p></p>
      <p></p>
      <div> <a href="www.outboundlink.com"> click </a> 
      </div>
</div>

<div class="mydiv">
  <p id="id2">test
    <p>
      <p></p>
      <p></p>
      <p></p>
      <div> <a href="www.outboundlink.com"> click </a> 
      </div>
</div>

<div class="mydiv">
  <p id="id3">test
    <p>
      <p></p>
      <p></p>
      <p></p>
      <div> <a href="www.outboundlink.com"> click </a> 
      </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>