javascript - 使用 jQuery 更改 href 值

Question

如何使用 jQuery 重写 href 值？

我有一个默认城市的链接

<a href="/search/?what=parks&city=Paris">parks</a>
<a href="/search/?what=malls&city=Paris">malls</a>

如果用户在#city 文本框中输入了一个值，我想用用户输入的值替换 Paris。

目前为止

var newCity = $("#city").val();

Answer 1

鉴于您具有独特的 href 值(?what=parks 和 ?what=malls)，我建议不要 将路径写入 $.attr() 方法；您必须为每个唯一的 href 调用一次 $.attr()，这会很快变得非常多余 - 更不用说难以管理了.

下面我将调用 $.attr() 并使用一个函数将 &city= 部分替换为新城市。这种方法的好处在于，这 5 行代码可以更新数百个链接，而不会破坏每个链接上其余的 href 值。

$("#city").change(function(o){
  $("a.malls").attr('href', function(i,a){
    return a.replace( /(city=)[a-z]+/ig, '$1'+o.target.value );
  });
});

您可能需要注意的一件事是空格和大小写。您可以使用 .toLowerCase() JavaScript 方法将所有内容转换为小写，并且您可以用另一个调用 .replace() 来替换空格，如下所示:

'$1'+o.target.value.replace(/\s+/, '');

在线演示:http://jsbin.com/ohejez/