[SOLUCIONADO] Pasar funcion de javascript a jquery

[mblascog]

Buenas, tengo el siguiente código con una llamada a una función de javascript:

Código Javascript:

<a id="enlace" href="javascript:funcion('precio')">precio</a> |
<a id="enlace" href="javascript:funcion('ciudad')">ciudad</a> |
<a id="enlace" href="javascript:funcion('metros')">metros</a> |
 

Pero estoy substituyendo todas las funciones que tengo en javascript por jquery y no sé si hay manera de obtener el valor que le pasaba a la función, es decir, en jquery escribo esta función:

Código Javascript:

$("#enlace").click(function() {
})
 

Pero no sé como obtener el parámetro que le pasaba a la función, he intentado lo siguiente, pero no funciona:

Código HTML:

<a id="enlace" href="precio">precio</a>
 

y

Código Javascript:

$("#enlace").val()
 

Pero devuelve nada.

Gracias

[caricatos]

Hola:

Primero deberías saber que los atributos "id" no deben estar repetidos... además, javascript nativo siempre es mejor que cualquier librería, así que en vez de migrar cosas viejas, creo mejor ese planteamiento para nuevos proyectos

Saludos

[mblascog]

Gracias por responder. Sé que los id's deben ser únicos. Ha sido un error al adaptar el código para postear.
Esté bien o no el migrar, creo que no es motivo de este post, me gustaría si alguien puede decirme como hacerlo

[PHPeros]

Como quieras...

Lo mejor sería asociar una función para cada cosa, y no utilizar parámetros inservibles.

[mblascog]

Es tal como lo tengo hecho, pero no me acaba de gustar, pues las cuatro funciones hacen exactamente lo mismo

[Alexis88]

Podrías usar un atributo personalizado.

Código HTML:

<a class = "ejemplo" data-valor = "valor 1">Enlace 1</a>
<a class = "ejemplo" data-valor = "valor 2">Enlace 2</a>
<a class = "ejemplo" data-valor = "valor 3">Enlace 3</a>
 

Código Javascript:

$(".ejemplo").on("click", function(){
    alert($(this).data("valor")); //El valor almacenado en el atributo personalizado
});
 

Saludos

[mblascog]

Gracias Alexis88,
He implementado el código que has escrito y no me funciona. El click no hace nada.
He visto que has eliminado el href. He probado de ponerlo y tampoco.
No conocía esta forma de escribir el evento onclick:

Código Javascript:

$(".ejemplo").on("click", function(){
 

Siempre lo había escrito así. También lo he probado y no funciona:

Código Javascript:

$(".ejemplo").onclick(function() {
 

Tengo que hacer alguna cosa más?
Gracias

[Trublux]

¿Has cambiado los ids "enlace" por clases?.
Se puede usar on para enlazar distintos eventos; si no lo conocías deberías consultar la documentación de jQuery o hacer algún curso, es bastante básico.

[GeekGirl]

No puede ser que el código de Alexis no te haya funcionado... incluíste la librería jQuery en tu código?
Si la respuesta es sí, probablemente estés ejecutando el script antes de que se cargen los elementos. Prueba encerrar la función dentro de document.ready:

Código Javascript:

$(document).ready(function(){
    $(".ejemplo").click(function(){
        alert($(this).data("valor")); //El valor almacenado en el atributo personalizado
    });
});
 

Saludos

[mblascog]

Gracias por responder.
Sí, cambié los id's por clases, tal como comentó 'caricatos'.
Que aún tengo mucho que aprender, lo tengo clarísimo, pero hago lo que puedo.

Lo he probado, creo que se carga todo, por lo si siguiente:

Código PHP:

$(".ejemplo").click(function() {
            alert ("hola");
        })
 

Aparece el mensaje "hola"

Pero si:

Código PHP:

$(".ejemplo").click(function() {
            alert ($(this).data("valor"));
        })
 

Sale "undefined"

Y el código HTML es este:

Código HTML:

<a class="ejemplo" data-valor="Precio">Precio</a>
 

Seguro que estoy haciendo algo mal, pero no sé verlo.
Gracias.

[GeekGirl]

Tenés sólo eso en tu HTML? Por ahí la clase ejemplo la estás usando en otra parte y de ahí el undefined

[Trublux]

¿Qué versión de jQuery estás usando?
¿Si en el que te da "undefined" pones esto qué te da?:

Código Javascript:

$(".ejemplo").click(function() {
    alert ($(this).attr("data-valor"));
});
 

[mblascog]

Fenomenal
De esta manera sí funciona, muchísimas gracias.

Estoy usando la versión 1.3.1 de jquery.

Muchas, muchas gracias

[Alexis88]

Sería bueno que empieces a utilizar una versión más actual, te estás perdiendo de muchos nuevos métodos. También pudiste haberlo hecho con código JavaScript nativo.

Código Javascript:

[].forEach.call(document.querySelectorAll(".ejemplo"), function(enlace){
    enlace.addEventListener("click", function(){
        alert(this.getAttribute("data-valor"));
    }, false);
});
 

Como verás, con unas cuantas líneas de código, puedes realizar lo mismo, con la ventaja de que ya no tendrías que cargar toda una librería para ello. Por ahí iba la recomendación de caricatos.

Saludos

[mblascog]

Gracias por responder.
No conocía jquery hasta que me encargaron el mantenimiento de una web existente.
Cuando empiezas la web de nuevo se puede escoger, cuando te toca un mantenimiento, te tienes que adaptar. No dudo en absoluto que tenga razón caricatos, sólo que este post no era el indicado para hablar de ello.
Actualizaré la versión de jquery.

Muchísimas gracias por vuestra ayuda.