使用 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()並使用 function 僅用新城市替換&city=部分。 這種方法的好處是，這5行代碼可以更新數百個鏈接，而不會破壞每個鏈接上href值的rest。

$("#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/

Answer 2

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

Answer 3

只要在#city輸入字段中釋放一個鍵， href就會更新。

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

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

});

Answer 4

像這樣：

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

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

編輯：添加了搜索字符串