添加从输入到href的编号
添加从输入到href的编号
提问于 2019-07-25 13:12:00
我试图将输入字段中的数字附加到链接中的URL中。
我的代码目前正在替换整个URL，而不是添加到它的末尾：
<input id='customquantity' type='number'></input>
<a href="/product/?add-to-cart=46551" id='url'>Add To Basket</a>
<script>
jQuery(function(){
jQuery('#customquantity').keyup(function(){
var quantity = jQuery('#customquantity').val();
jQuery('#url').attr('href', '&quantity= ' + quantity);
});
});
</script>如果有人将'3'输入到输入中，则href变成：
href="&quantity=3"而不是：
href="/product/?add-to-cart=46551&quantity=3"有人能解释我哪里出了问题吗？
回答 3
Stack Overflow用户
回答已采纳
发布于 2019-07-25 13:15:59
这个命令：
jQuery('#url').attr('href', '&quantity= ' + quantity);将更改元素的href属性，而不是附加到其中。要追加，您需要执行以下操作：
var href = jQuery('#url').attr('href'); // Get the current href
jQuery('#url').attr('href', href + '&quantity= '+ quantity);但是，请注意，每次函数运行时，这都会附加到href中。以下是我要采取的全面做法：
<input id='customquantity' type='number'></input>
<a href="/product/?add-to-cart=46551" data-basehref="/product/?add-to-cart=46551" id='url'>Add To Basket</a>
<script>
jQuery(function(){
jQuery('#customquantity').keyup(function(){
var quantity = jQuery('#customquantity').val();
var href = jQuery('#url').attr('data-basehref');
jQuery('#url').attr('href', href + '&quantity= ' + quantity);
});
});
</script>说明:将要附加到的原始href作为基属性添加，然后每次要更改它时，都要根据该值进行修改。
Stack Overflow用户
发布于 2019-07-25 13:13:45
您需要获取原始值并将您的更改追加到末尾：
jQuery(function(){
let url = jQuery('#url').attr('href');
jQuery('#customquantity').keyup(function(){
var quantity = jQuery('#customquantity').val();
jQuery('#url').attr('href', url + '&quantity= ' + quantity);
});
});Stack Overflow用户
发布于 2019-07-25 13:28:04
可以使用URL.searchParams api修改<a>的search属性。
还请注意使用input事件来捕获随着箭头切换以及粘贴和关键事件而递增的数字。
jQuery(function(){
jQuery('#customquantity').on('input', function(){
var quantity = jQuery(this).val();
jQuery('#url').prop('search', function(){
var params = new URL(this.href).searchParams;
params.set('quantity', quantity);
return params;
});
// demo log only
console.log(jQuery('#url').prop('search'))
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id='customquantity' type='number'></input>
<a href="/product/?add-to-cart=46551" id='url'>Add To Basket</a>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57202786
复制相关文章
相似问题
腾讯云开发者
