如何使用 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 ，因此您可能希望根据您的确切需要更改该事件处理程序。