JQuery kullanarak etiketin hrefniteliğini <a>çalışma zamanında ayarlamanın en iyi yolu nedir ?
Ayrıca, jQuery kullanarak etiket hrefözniteliğinin değerini nasıl elde edersiniz <a>?
Çalışma zamanında href niteliğini ayarlama
Yanıtlar:
Bir HTML öğesinin niteliğini almak veya ayarlamak için element.attr(), jQuery'deki işlevi kullanabilirsiniz .
Href özelliğini almak için aşağıdaki kodu kullanın:
var a_href = $('selector').attr('href');Href niteliğini ayarlamak için aşağıdaki kodu kullanın:
$('selector').attr('href','http://example.com');Her iki durumda da lütfen uygun seçiciyi kullanın. Bağlantı öğesi için sınıfı ayarladıysanız ve bağlantı öğesi '.class-name'için kimliği ayarladıysanız kullanın '#element-id'.
1
Bunu href almak için kullandım. alert ($ ( "# yayımlamak-bağlantı") attr ( "href").); Ve bana "tanımsız" uyarısı verdi.
—
gautamlakum
muhtemelen yayınlama bağlantınızın kimlik yerine bir sınıf olduğu anlamına gelir. try: alert ($ (". yayınla-link"). attr ("href")); yerine
—
jim tollan
ahh özür dilerim. Haklısın. Sınıf uyguladım ve jquery kodunda '#' kullandım. uyarı ile çalıştı ($ (". yayınla-link"). attr ("href")); Çok teşekkürler. :)
—
gautamlakum
JQuery 1.6+ sürümünde kullanmak daha iyidir:
$(selector).prop('href',"http://www...")için ayarlanmış bir değer, ve
$(selector).prop('href')için olsun değeri
Kısacası, .propalır ve ayarlar değerleri üzerinde DOM nesnesi ve .attrdeğerleri alır ve ayarlar HTML . Bu, .propbazı bağlamlarda biraz daha hızlı ve muhtemelen daha güvenilir hale getirir .
'.prop' tam yol alacaktır: http: //www.../index.html .attr yalnızca: 'index.html'
—
DevWL
hrefÖzelliği şununla ayarlayın:
$(selector).attr('href', 'url_goes_here');ve kullanarak oku
$(selector).attr('href');"Seçici" <a>öğeniz için geçerli herhangi bir jQuery seçicisidir (en basit olanları adlandırmak için ".myClass" veya "#myId").
Bu yardımcı olur umarım !
Bunu href almak için kullandım. alert ($ ( "# yayımlamak-bağlantı") attr ( "href").); Ve bana "tanımsız" uyarısı verdi.
—
gautamlakum
@ lakum4stackOnun uyarı kodunu,
—
Valentin Flachsel
hrefözelliğinizi ayarlamadan ÖNCE , seçicinizin doğru olduğunu varsayarak yürüttünüz .
try: alert ($ (". yayınla-link"). attr ("href")); öğeniz bir kimlik yerine bir sınıf olabilir. aslında, etkinliğinizin içindeyse muhtemelen $ (this) kullanmak
—
jim tollan
Üç çözüm için küçük performans testi karşılaştırması:
$(".link").prop('href',"https://example.com")$(".link").attr('href',"https://example.com")document.querySelector(".link").href="https://example.com";
Burada testi kendiniz yapabilirsiniz https://jsperf.com/a-href-js-change
Href değerlerini aşağıdaki şekillerde okuyabiliriz
let href = $(selector).prop('href');let href = $(selector).attr('href');let href = document.querySelector(".link").href;
Burada testi kendiniz yapabilirsiniz https://jsperf.com/a-href-js-read
Güzel! İşin garibi, karşıt sonuçlar alıyorum, ama bunları kendim yönetebilmem ilginç.
—
HoldOffHunger
@HoldOffHunger evet - çok ilginç - makineniz, işletim sisteminiz ve tarayıcınız nedir?
—
Kamil Kiełczewski
FF59, Win10. Sonuçlar tekrar biraz değişmiş gibi görünüyor (belki açık sekme sayısına bağlıdır), ancak yine de çoğunlukla aynıdır: imgur.com/a/MLDnTWM Makine: 10 yıllık intel board (dp55wg), 3.1ghz dört çekirdekli, 16 gb ddr3 ram, gtx1070.
—
HoldOffHunger
<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>
Yalnızca kod yanıtları, çalışma kodu artı yararlı açıklamaları olan yanıtlar kadar yararlı değildir. Bu durumda, bu cevabı 5 yaşında bir çocuğa açıklamak faydalı olacaktır.
—
Somnath Muluk