[英]How to add/update params to href attribute via jQuery?
我有一个包含锚元素的页面:
<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做到最好的方法是什么?
这是JavaScript和jQuery中的示例。
function updateCountry (element, country) { var url = element.getAttribute('href'); if (url.includes('country')) { url = url.replace(/(\\?country=)[AZ]{2}/, `$1${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>
function updateCountry (element, country) { var url = element.attr('href'); if (url.includes('country')) { url = url.replace(/(\\?country=)[AZ]{2}/, `$1${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>
使用jquery .attr( function )
添加/编辑元素的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>
写一个自定义函数来处理向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>
您可以将函数作为第二个参数传递给.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=)[az]+/ig, '$1UK'); }); 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.