Как добавить новый атрибут в гиперссылку, используя 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

Если вы хотите изменить свойство 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, поэтому вы можете изменить этот обработчик событий в зависимости от ваших конкретных потребностей.

Answer 2

Ваш селектор был в порядке. Использование 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/>