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?
3 respuestas
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 !
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>
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/
Preguntas relacionadas
Nuevas preguntas
javascript
Para preguntas sobre la programación en ECMAScript (JavaScript / JS) y sus diversos dialectos / implementaciones (excepto ActionScript). Incluya todas las etiquetas relevantes en su pregunta; por ejemplo, [node.js], [jquery], [json], etc.