Ustawienie atrybutu href w czasie wykonywania

202

Jaki jest najlepszy sposób na ustawienie href atrybutu <a>znacznika w czasie wykonywania przy użyciu jQuery?

Jak uzyskać wartość hrefatrybutu <a>znacznika za pomocą jQuery?

javascript jquery html

— gautamlakum
źródło

378

Aby uzyskać lub ustawić atrybut elementu HTML, możesz użyć element.attr() funkcji w jQuery.

Aby uzyskać atrybut href , użyj następującego kodu:

var a_href = $('selector').attr('href');

Aby ustawić atrybut href , użyj następującego kodu:

$('selector').attr('href','http://example.com');

W obu przypadkach użyj odpowiedniego selektora. Jeśli ustawiłeś klasę dla elementu kotwicy, użyj, '.class-name'a jeśli ustawiłeś identyfikator dla elementu kotwicy, użyj '#element-id'.

— Stout Joe
źródło

1

Użyłem tego, aby uzyskać href. alert ($ („# opublikuj link”). attr („href”)); I dało mi to alert „niezdefiniowany”.

— gautamlakum

3

prawdopodobnie oznacza to, że link do publikowania jest klasą, a nie identyfikatorem. try: alert ($ („. opublikuj link”). attr („href”)); zamiast tego

— Jim Tollan,

3

@ lakum4stackof: Byłoby pomocne, jeśli opublikujesz dokładny tag

ach przepraszam. masz rację. Zastosowałem klasę i użyłem „#” w kodzie jquery. działało z alertem ($ („. opublikuj link”). attr („href”)); Dzięki wielkie. :)

— gautamlakum

18

W jQuery 1.6+ lepiej jest użyć:

$(selector).prop('href',"http://www...")aby ustawić wartość, a

$(selector).prop('href')aby uzyskać wartość

Krótko mówiąc, .proppobiera i ustawia wartości w obiekcie DOM oraz .attrpobiera i ustawia wartości w kodzie HTML . To sprawia, .propże trochę szybciej i być może bardziej niezawodne w niektórych kontekstach.

— Gerbus
źródło

1

zgodzić się „.prop” otrzyma pełną ścieżkę, jak: http: //www.../index.html, podczas gdy .attr dostanie tylko: „index.html”

— DevWL

14

Ustaw hrefatrybut za pomocą

$(selector).attr('href', 'url_goes_here');

i przeczytaj za pomocą

$(selector).attr('href');

Gdzie „selektor” to dowolny prawidłowy selektor jQuery dla twojego <a>elementu („.myClass” lub „#myId”, aby wymienić najprostsze).

Mam nadzieję że to pomoże !

— Valentin Flachsel
źródło

Użyłem tego, aby uzyskać href. alert ($ („# opublikuj link”). attr („href”)); I dało mi to alert „niezdefiniowany”.

— gautamlakum

@ lakum4stackof najprawdopodobniej wykonałeś ten kod ostrzegawczy PRZED ustawieniem hrefatrybutu, zakładając, że Twój selektor jest poprawny.

— Valentin Flachsel,

2

try: alert ($ („. opublikuj link”). attr („href”)); ponieważ twoim elementem może być klasa, a nie identyfikator. w rzeczywistości prawdopodobnie używa $ (this), jeśli jest w twoim wydarzeniu

— Jim Tollan

2

Małe porównanie testu wydajności dla trzech rozwiązań:

$(".link").prop('href',"https://example.com")
$(".link").attr('href',"https://example.com")
document.querySelector(".link").href="https://example.com";

Tutaj możesz samodzielnie wykonać test https://jsperf.com/a-href-js-change

Możemy odczytywać wartości href w następujący sposób

let href = $(selector).prop('href');
let href = $(selector).attr('href');
let href = document.querySelector(".link").href;

Tutaj możesz samodzielnie wykonać test https://jsperf.com/a-href-js-read

— Kamil Kiełczewski
źródło

Miły! Co dziwne, otrzymuję przeciwne wyniki, ale interesujące jest, że mogę je uruchomić samodzielnie.

— HoldOffHunger

@HoldOffHunger tak - bardzo interesujące - jaka jest twoja maszyna, system operacyjny i przeglądarka?

— Kamil Kiełczewski

1

FF59, Win10. Wygląda na to, że wyniki uległy nieznacznej zmianie (być może zależy to od liczby otwartych kart), ale nadal w większości są takie same: imgur.com/a/MLDnTWM Maszyna: 10-letni intel board (dp55wg), czterordzeniowy 3,1 GHz, 16 GB pamięci RAM DDR3, GTx1070.

— HoldOffHunger

1

<style>
a:hover {
    cursor:pointer;
}
</style>

<script type="text/javascript" src="lib/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $(".link").click(function(){
        var href = $(this).attr("href").split("#");
        $(".results").text(href[1]);
    })
})
</script>



<a class="link" href="#one">one</a><br />
<a class="link" href="#two">two</a><br />
<a class="link" href="#three">three</a><br />
<a class="link" href="#four">four</a><br />
<a class="link" href="#five">five</a>


<br /><br />
<div class="results"></div>

— Nanang HD
źródło

1

Odpowiedzi zawierające tylko kod nie są tak pomocne, jak odpowiedzi zawierające działający kod i pomocne wyjaśnienia. W takim przypadku warto wyjaśnić tę odpowiedź pięciolatkowi.

— Somnath Muluk