使用jQuery更改href属性值

Question

如何使用jQuery重写href值？

我有一些带有默认城市的链接。

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

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

目前为止我已经有：

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

- ram1

---

我建议使用表单来完成这个功能，因为你现在的做法会导致搜索功能在没有 JavaScript 的情况下无法使用。 - Kokos

Answer 1

假设你有唯一的 href 值（?what=parks 和 ?what=malls），我建议不要在 $.attr() 方法中写入路径；否则，你需要为每个唯一的 href 调用一次 $.attr()，这将很快变得非常冗余和难以管理。

下面，我会使用一个函数替换掉 &city= 部分，只需调用一次 $.attr()。这种方法的好处是，这五行代码可以更新数百个链接，而不破坏每个链接上其余的 href 值。

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

你可能需要注意的一件事就是空格和大小写。你可以使用JavaScript的.toLowerCase()方法将所有内容转换为小写，并且可以像下面我所做的那样使用另一个.replace()调用来替换空格：

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

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

- Sampson

---

不必要时为什么要使用正则表达式？那不会让程序变得更慢、更笨重吗？ - AndyL

@AndyL 因为明天的URL可能不是 /search/?what=parts&city=Paris，而是 /search/?when=afternoon&what=parks&city=Paris 或其他变体。你不应该去重写你的JavaScript来适应这些变化；在我真诚的意见中，这将会非常繁琐。 - Sampson

@ryaz 我进行了一些重构，以减少所涉及的代码量。 - Sampson

@AndyL 另一个需要考虑的因素是用户有两个链接，带有两个不同的URL结构。其中一个以?what=parks开头，而另一个则为?what=malls。我上面的方法只会关注&city=[a-z]部分，将其余部分保持原样。如果我们覆盖整个路径，那么我们就会用?what=malls来覆盖?what=parks。 - Sampson

还要知道这个正则表达式还有待改进。它不支持空格、空格编码、连字符、破折号或任何其他特殊字符（或特殊字符编码），这些在URL参数中是允许的。 - Ty.

Answer 2

 $('a').attr("href", "/search/?what=parks&city=" + newCity);

- AndyL

Answer 3

一旦在#city输入框中释放按键，href将会被更新。

$('#city').keyup(function(){

    $('a').attr('href','/search/?what=parks&city='+$(this).val());

});

- Kokos

---

谢谢！很好。尽管我做了一些更改...我已经添加了"onkeyup"回调到"input"中。就像<input id="..." ... onkeyup="keyUp()">，在这个回调函数中，我添加了代码。 谢谢！ - OhadR

Answer 4

像这样：

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

$('a').attr('href', '/search/?what=parks&city=' + newCity);

EDIT: Added the search string

- Phil

---

这将替换整个URL，而不仅仅是 city 参数的值。 - James Allardice

谢谢，我相信原帖作者肯定已经明白了这一点。 - Phil