Dentro de un "div" tengo varias etiquetas cada una con un "id" diferente, que llaman a una misma función de javascript
, con el evento onclick
.
¿Como se en la función, cual etiqueta esta llamando la funcion?
Dentro de un "div" tengo varias etiquetas cada una con un "id" diferente, que llaman a una misma función de javascript
, con el evento onclick
.
¿Como se en la función, cual etiqueta esta llamando la funcion?
Si los llamas de esta manera:
<a onClick="javascript: myFunc(this);">
... puedes en la funcion hacer lo siguiente:
function myFunc(element){
var id = element.getAttribute("id");
}
... el parametro element es la etiqueta en si, accedes a ella sin la necesidad de hacerle un getElementById
Para eso debes mandar manualmente el ID como parámetro en tu función
<script type="text/javascript">
function my_onclick(id)
{
alert(id);
}
</script>
<div>
<a href="#" id="l1" onClick="my_onclick(this.id)">Link 1</a>
<a href="#" id="l2" onClick="my_onclick(this.id)">Link 2</a>
<a href="#" id="l3" onClick="my_onclick(this.id)">Link 3</a>
</div>
EN CASO DE OCUPAR JQUERY
Prueba con esto, espero que sea de ayuda.
Cualquier cosa preguntas
function saberLink(id){
var texto = $("#link"+id).html();
alert("Has hecho click en el link " +id+ ", y su valor es: "+ texto);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div>
<a id="link1" href="#" onclick="saberLink(1)">Link 1</a>
<a id="link2" href="#" onclick="saberLink(2)">Link 2</a>
<a id="link3" href="#" onclick="saberLink(3)">Link 3</a>
<a id="link4" href="#" onclick="saberLink(4)">Link 4</a>
<a id="link5" href="#" onclick="saberLink(5)">Link 5</a>
<a id="link6" href="#" onclick="saberLink(6)">Link 6</a>
<a id="link7" href="#" onclick="saberLink(7)">Link 7</a>
</div>
Sería mejor si a las mismas etiquetas les pones la misma clase no es necesario estan pensando en ID´s si la función de todos esos elementos será la misma.
<div>
<a class="getLink" href="#">Link 1</a>
<a class="getLink" href="#">Link 2</a>
<a class="getLink" href="#">Link 3</a>
<a class="getLink" href="#">Link 4</a>
<a class="getLink" href="#">Link 5</a>
<a class="getLink" href="#">Link 6</a>
<a class="getLink" href="#">Link 7</a>
</div>
<script>
$(document).on('click','.getLink',function(){
var texto = $(this).text();
console.log("La liga es: "+texto);
});
</script>