javascript - 为多个相似元素触发脚本

Question

假设我有文本:

<div class="text">Here is some text. 
In this text there are links <a href="#" class="link" id="an1">here</a> 
and there are links <a href="#" class="link" id="an2">there</a>. 
And there are probably many more! 
They each open their own annotation on the side.</div>

我有以下要打开的注释:

<div class="annotation" id="an1">I'm the first annotation!</div>
<div class="annotation" id="an2">And I'm another one!</div>

我使用如下脚本:

function myAnnotation() {
  var x = document.getElementById("an1");
  if (x.style.display === "block") {
    x.style.display = "none";
  } else {
    x.style.display = "block";
  }
}

我如何编写一个脚本来获取我的各个链接的 ID，然后打开相应的注释？

Answer 1

试试这个。

<div class="text">Here is some text. 
In this text there are links <a href="#" class="link" id="an1" data-target="an3">here</a> 
and there are links <a href="#" class="link" id="an2" data-target="an4">there</a>. 
And there are probably many more! 
They each open their own annotation on the side.</div>

<div class="annotation" id="an3" style="display:none">I'm the first annotation!</div>
<div class="annotation" id="an4" style="display:none">And I'm another one!</div>

<script>
$('.link').on('click',function(e){

var id = e.target.attributes.getNamedItem("data-target").value;

 var x = document.getElementById(id);

 if (x.style.display === "block") {
    x.style.display = "none";
  } else {
    x.style.display = "block";
 }

});

</script>

工作演示

https://jsfiddle.net/0rhnkzuj/1/