如何通过jQuery将参数add/update传递给href属性？

Question

我有一个包含锚元素的页面：

<a id="courses" href="/courses">Courses</a>

我想向 href 添加或更新一些参数，例如：

添加一个country参数：<a id="courses" href="/courses?country=US">Courses</a>
将 country 参数从 US 更新为 UK：<a id="courses" href="/courses?country=UK">Courses</a>

通过 JavaScript 或 jQuery 执行此操作的最佳方法是什么？

Answer 1

这是 JavaScript 和 jQuery 中的示例。

原版 JavaScript

function updateCountry (element, country) {
  var url = element.getAttribute('href');

  if (url.includes('country')) {
    url = url.replace(/(\?country=)[A-Z]{2}/, `${country}`)
  } else {
    url = url.concat(`?country=${country}`)
  };

  element.setAttribute('href', url);

  console.log(element.getAttribute('href'));
}

var element = document.getElementById('courses');

updateCountry(element, 'US'); // Add
updateCountry(element, 'UK'); // Update

<a id="courses" href="/courses">Courses</a>

jQuery

function updateCountry (element, country) {
  var url = element.attr('href');
  
  if (url.includes('country')) {
    url = url.replace(/(\?country=)[A-Z]{2}/, `${country}`)
  } else {
    url = url.concat(`?country=${country}`)
  };

  element.attr('href', url);

  console.log(element.attr('href'));
}

var element = $('#courses');

updateCountry(element, 'US'); // Add
updateCountry(element, 'UK'); // Update

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a id="courses" href="/courses">Courses</a>

Answer 2

使用 jquery .attr( function ) 到 add/edit href 元素的属性。在函数中检查属性是否没有 country 参数，添加到它，如果有编辑它。

$("#courses").attr("href", function(i, href){
  var index = href.indexOf("?");
  return (index == -1 ? href : href.substring(0, index)) + "?country=US";
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a id="courses" href="/courses">Courses</a>

Answer 3

编写一个自定义函数来处理向 href 属性添加属性。

// function to change href attribute

function addPropertyToCourses(prop,value) { 

   var courses = document.getElementById('courses');
   if (courses.href.indexOf("?") == -1) { 
      courses.href += "?"; 
   } else {
      courses.href += "&";
   }
   courses.href += prop + '=' + value;
}

(function() { 
 // add properties
    addPropertyToCourses("country", "UK");
    addPropertyToCourses("someProp", "someValue");
})();

<a id="courses" href="/courses">Courses</a>

Answer 4

您可以将函数作为第二个参数传递给 .attr() 以修改 href 属性。

尝试以下方式：

// set
$("#courses").attr('href','/courses?country=US'); 
console.log($("#courses").attr('href'));

// update
$('#setParam').click(function(){
  $("#courses").attr('href', function(_, el){
    return el.replace(/(country=)[a-z]+/ig, 'UK');
  });
  console.log($("#courses").attr('href'));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a id="courses" href="/courses">Courses</a>
<button id="setParam" type="button">Set Param</button>

如何通过jQuery将参数add/update传递给href属性？

How to add/update params to href attribute via jQuery?

html

javascript

anchor

jquery

原版 JavaScript

jQuery