使用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();

來源

2011-06-30 ram1

我建議這樣做與表單，因爲你現在做的方式現在使你的搜索功能無法使用JavaScript。 – Kokos

鑑於你有獨特的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/

來源

2011-06-30 19:46:29 Sampson

爲什麼在不需要時使用正則表達式？在技術上不會更慢，更糟糕？ – AndyL

@AndyL因爲明天的URL可能不是'/ search /？what = parts＆city = Paris'，而是'/ search /？when = afternoon＆what = parks＆city = Paris'或其他變體。您不必去重寫JavaScript以適應這些類型的更改;根據我的真誠意見，這太繁重了。 – Sampson

有效的點，但它絕對取決於應用程序。 – AndyL

像這樣：

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

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

編輯：增加的搜索字符串

來源

2011-06-30 19:33:43 Phil

這將取代整個URL，而不僅僅是'city'參數的值。 –

謝謝，我很確定OP會想出來。 – Phil

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

來源

2011-06-30 19:34:05 AndyL

只要一個按鍵被#city內釋放輸入字段，href將被更新d。

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

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

});

來源

2011-06-30 19:39:23 Kokos

這是最好的解決方案。 – Phil

謝謝!!好的。即使我做了一些修改......我已經在「輸入」中添加了「onkeyup」回調。像並且在此回調函數中添加了代碼。謝謝！ – OhadR

使用jQuery更改href值

回答

相關問題