¿Cómo obtener el href del enlace en el que se hizo clic con jquery?


87

¿Alguien sabe cómo puedo obtener el href del enlace en el que se hizo clic con jquery? Tengo el enlace de la siguiente manera:

    <a  href="ID=1" class="testClick">Test1.</a>
    <br />
    <a  href="ID=2" class="testClick">Test2.</a>
    <br />
    <a  href="ID=3" class="testClick">Test3.</a>

Escribí un código de la siguiente manera para obtener el valor href del enlace en el que hice clic. Pero de alguna manera, esto siempre me devuelve el href del primer enlace (ID = 1) aunque hice clic en Test2 o Test3. ¿Alguien sabe qué está pasando aquí? y ¿cómo puedo solucionar este problema?

    $(".testClick").click(function () {
        var value = $(".testClick").attr("href");
        alert(value );
    });

Respuestas:


176

esto en su función de devolución de llamada se refiere al elemento en el que se hizo clic.

   $(".addressClick").click(function () {
        var addressValue = $(this).attr("href");
        alert(addressValue );
    });

18
O simplemente se puede acceder a él directamente en lugar de crear un objeto jQuery. var addressValue = this.href;
Chris

1
Para su información, si el href es relativo, href="sibling_file.htm"entonces $ (this) .attr ("href") regresa sibling_file.htmy this.href regresa https://example.com/folder/sibling_file.htm(que es lo que esperaba y quería)
Redzarf


10
$(".testClick").click(function () {
         var value = $(this).attr("href");
         alert(value );     
}); 

Cuando usa $ (". ClassName") obtiene el conjunto de todos los elementos que tienen esa clase. Luego, cuando llama a attr, simplemente devuelve el valor del primer elemento de la colección.


4

Supongamos que tenemos tres etiquetas de anclaje como,

<a  href="ID=1" class="testClick">Test1.</a>
<br />
<a  href="ID=2" class="testClick">Test2.</a>
<br />
<a  href="ID=3" class="testClick">Test3.</a>

ahora en guion

$(".testClick").click(function () {
        var anchorValue= $(this).attr("href");
        alert(anchorValue);
});

use esta palabra clave en lugar de className (testClick)

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.