如何使用 jQuery 向超鏈接添加新屬性

Question

我想知道如何使用 JQuery 向超鏈接添加新屬性我嘗試了各種選擇方法，但沒有一個適用於我的 html 代碼

html代碼

<a href="https://useotools.com/contact#faq" class="current"><i class="menu_icon blank fa"></i><span>FAQs</span><span class="plus"></span></a>

js代碼

 jQuery(window).load(function () {
 // if contain contact#faq
 jQuery('a[href~="contact#faq"]').prop("onclick", "window.location.href='https://useotools.com'; return false;");

 // if url equal to 
  jQuery('a[href="https://useotools.com/contact#faq"]').prop("onclick", "window.location.href='https://useotools.com'; return false;");

 // if url end with
   jQuery('a[href$="contact#faq"]').prop("onclick", "window.location.href='https://useotools.com'; return false;");

  // if url start with
   jQuery('a[href*="useotools.com/contact#faq"]').prop("onclick", "window.location.href='https://useotools.com'; return false;");

 });  

代碼筆： https ://codepen.io/Zelda99/pen/poJxmEL

Answer 1

你的選擇器沒問題。 使用 prop 更改 onclick 不行。

你的jQuery(window).load(function () {})也不正確，應該是jQuery(window).on('load',function () {})

我更喜歡$(function() {})

 $(function() { $('a[href$="contact#faq"]') .css("background-color","red") // check the selector is ok .attr("onclick", "window.location.href='https://useotools.com'; alert('bla'); return false;"); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <a href="https://useotools.com/contact#faq" class="current"><i class="menu_icon blank fa"></i><span>FAQs</span><span class="plus"></span></a>

我更喜歡點擊

 $(function() { $(".current").on("click", function(e) { // or $("[href$='contact#faq']").on() // if (this.href.indexOf("contact#faq") !=-1) this.href = 'https://useotools.com'; if (this.hash==="#faq") this.href = 'https://useotools.com'; }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <a href="https://useotools.com/contact#faq" class="current"><i class="menu_icon blank fa"></i><span>FAQs</span><span class="plus"></span></a>

要更改位置，您可以執行

 $(function() { $("[href$='contact#faq']").on("click", function(e) { e.preventDefault(); // stop the link click location = 'https://useotools.com'; }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <a href="https://useotools.com/contact#faq" class="current"><i class="menu_icon blank fa"></i><span>FAQs</span><span class="plus"></span></a>

 $(function() { $("#link1").prop("onclick","alert(this.href); return false"); $("#link2").prop("onClick","alert(this.href); return false"); $("#link3").attr("onClick","alert(this.href); return false"); $("#link4").attr("onclick","alert(this.href); return false"); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <a href="https://google.com" id="link1">prop onclick Not ok</a><br/> <a href="https://google.com" id="link2">prop onClick Not ok</a><br/> <a href="https://msn.com" id="link3">attr onclick works</a><br/> <a href="https://cnn.com" id="link4">attr onClick works</a><br/>

Answer 2

如果你想改變一個元素的href屬性，你只需要使用prop() 。 您不需要為其創建單獨的點擊處理程序。

另請注意，您創建的所有條件都可以歸結為一個條件：如果 href 包含contact#faq 。 因此，您可以使用單個屬性選擇器。

最后load()不是事件處理程序。 您需要改用on('load') 。 嘗試這個：

$(window).on('load', function() {
  $('a[href*="contact#faq"]').prop('href', 'https://useotools.com');
});

還值得注意的是window.load事件與document.ready ，因此您可能希望根據您的確切需要更改該事件處理程序。