使用jQuery更改href值

ram*_*am1 11 javascript jquery

如何使用jQuery重写href值?

我有默认城市的链接

<a href="/search/?what=parks&city=Paris">parks</a>
<a href="/search/?what=malls&city=Paris">malls</a>
Run Code Online (Sandbox Code Playgroud)

如果用户在#city文本框中输入值,我想用用户输入的值替换Paris.

到目前为止我有

var newCity = $("#city").val();
Run Code Online (Sandbox Code Playgroud)

Sam*_*son 31

鉴于你有唯一的href值(?what=parks,和?what=malls),我建议不要$.attr()方法中写一个路径; 你必须$.attr()为每个独特的人打一个电话href,而且这很快就会变得非常多余 - 更不用说难以管理了.

下面我正在拨打电话$.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 );
  });
});
Run Code Online (Sandbox Code Playgroud)

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

'$1'+o.target.value.replace(/\s+/, '');
Run Code Online (Sandbox Code Playgroud)

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

  • @AndyL因为明天URL可能不是`/ search /?what = parts&city = Paris`,而是`/ search /?when = afternoon&what = parks&city = Paris`或其他一些变体.您不必去重写JavaScript以适应这些类型的更改; 我真诚地认为,这太麻烦了. (3认同)

And*_*dyL 15

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


Kok*_*kos 5

只要在#city输入字段中释放密钥,href就会更新.

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

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

});
Run Code Online (Sandbox Code Playgroud)