Activar un script para múltiples elementos similares.

Question

Entonces digamos que tengo texto:

<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>

Y tengo las siguientes anotaciones que quiero abrir:

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

Y uso un script como el siguiente:

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

¿Cómo puedo escribir un script que tome la identificación de mis enlaces individuales y luego abra la anotación adecuada?

javascript jquery html css

1

lehtia 16 oct. 2019 a las 08:16

Answer 1

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>

Nota: - Debe crear una función y vincular esa función en Haga clic y pasar el parámetro allí. para que pueda obtener show hide dinámico de esa función.

Espero que esto ayude !

1

Parth Raval 16 oct. 2019 a las 05:31

Answer 2

Primero: no puede usar la misma ID dos veces (o más)

Si comprende su pregunta, desea mostrar un elemento en la acción del usuario (como un clic)

Recomiendo no alternar la pantalla.

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>

0

Herikle Mesquita 16 oct. 2019 a las 05:26

Answer 3

Pruebe este.

<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>

Demo de trabajo

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

1

Vishal modi 16 oct. 2019 a las 05:26

Activar un script para múltiples elementos similares.

3 respuestas

Nuevas preguntas

javascript