javascript - 根据输入值更改 href 目标
问题描述
我目前正在创建一个允许自定义捐赠的捐赠表格。我的捐赠插件检测到 ?amount= url 值并在用户登陆捐赠页面时预先选择它。
到目前为止,这是 html 输入:
<input type="text" placeholder="7.00" name="singular" id="singular">
<a href="http://example.com/donate/?amount=" id="myLink" class="et_pb_button dnt">Donate</a>
这是javascript:
$('#singular').on('input', function() {
$('#myLink').prop('href', this.value);
});
但是,当我单击实际的捐赠按钮时,它会将输入的值添加到当前页面 url 的末尾,例如:http://example.com/page1/7
而不是将您带到http://example.com/donate/?amount=7
.
我知道这一定是非常简单的事情。我怎样才能解决这个问题?
错误更新
加载https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js时,建议的脚本可以正常工作。
但是,当我删除该 jquery.min 并加载完整的 wordpress 核心 jquery(版本:1.12.4)时,Chrome Inspect 显示以下错误:
未捕获的类型错误:$ 不是函数
更新 2.0
我找不到解决错误的简单方法,但在我的搜索中,如果其他人有兴趣这样做,我确实找到了一个不依赖于 javascript 的解决方案:
解决方案
您的代码的问题是您正在href
通过输入值覆盖链接的属性。这使得href
锚点的 相对于当前页面的 URL,这就是它导航到 URL 的原因,例如http://example.com/page1/7
.
您将需要使用输入框的值更改查询参数。
一种方法是使用URL
API 来更改amount
查询参数。请参阅以下代码段。
$('#singular').on('input', function() {
var href = new URL($('#myLink').prop('href'));
href.searchParams.set('amount', this.value);
$('#myLink').prop('href', href.toString())
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" placeholder="7.00" name="singular" id="singular">
<a href="http://example.com/donate/?amount=" id="myLink" class="et_pb_button dnt">Donate</a>
推荐阅读
- python - 如何解决 Pandas 合并错误:键必须是整数或时间戳?
- reactjs - 如何将其转换为使用我已经到位的代码?
- c# - URL 中页面名称后所有路径的 ASP.NET Core Razor 页面端点路由
- text-files - 如何删除打印的文本文件中的引号
- angular - Angular http get 请求什么也不做
- php - 在 Google Cloud 中使用 Laravel 8 的 Docker 容器的 503“服务不可用”
- c - 如何监控文件系统路径名在 C 或 inotify 中被重命名?
- python - 如何删除多个文件名中的所有空格?
- python - 从具有特定 id 的 div 开始获取嵌套的 div 内容
- python - 我想使用 Html/Css 向左移动图像