Запуск сценария для нескольких похожих элементов

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/

Answer 2

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

<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" onclick="myAnnotation(1)">I'm the first annotation!</div>
<div class="annotation" onclick="myAnnotation(2)">And I'm another one!</div>

Примечание: - Вам нужно создать функцию и связать эту функцию с кликом и передать туда параметр. так что вы можете получить динамическое скрытие этой функции.

Надеюсь, это поможет!

Answer 3

Во-первых: вы не можете использовать один и тот же идентификатор дважды (или более)

Если вы понимаете ваш вопрос, вы хотите показать элемент действия пользователя (например, щелчок)

Я рекомендую не переключать дисплей.

function myAnnotation(id) {
  var x = document.getElementById(id);
  x.style.display = "block";
}

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

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