时间戳

首页 > 解决方案 > 为锚链接 URL 查询添加动态文本

javascript - 为锚链接 URL 查询添加动态文本

问题描述

我有一组由另一个系统生成的锚点。

锚点是切换锚点，真/假开关也是如此。

我需要在其中添加用户输入的自定义文本。我以为我可以使用 JQuery 来构建它，但系统根本没有按预期响应和更新。

我进行了广泛的搜索，似乎找不到类似的问题；除了这个关于在表单提交上动态添加 get 参数到 url 的问题。但那是表格形式，这应该用于锚点。

例如：

目前：

<table id='custRefTable'>
<tr>
    <td class="passed" title='Sunday, January  5, 2020 (date has passed)'><a href='toggle.php?date=2020-01-05'>05</td>
    <td class="passed" title='Monday, January  6, 2020 (date has passed)'><a href='toggle.php?date=2020-01-06'>06</td>
    <td class="passed" title='Tuesday, January  7, 2020 (date has passed)'><a href='toggle.php?date=2020-01-07'>07</td>
    <td class="passed" title='Wednesday, January  8, 2020 (date has passed)'><a href='toggle.php?date=2020-01-08'>08</td>
    <td class="passed" title='Thursday, January  9, 2020 (date has passed)'><a href='toggle.php?date=2020-01-09'>09</td>
    <td class="passed" title='Friday, January 10, 2020 (date has passed)'><a href='toggle.php?date=2020-01-10'>10</td>
    <td class="passed" title='Saturday, January 11, 2020 (date has passed)'><a href='toggle.php?date=2020-01-11'>11</td>
</tr>
</table>

有了这个 HTML，我想添加一个 INPUT：

    <div>
        <p>Reference will be saved with each new booking made on this page.</p>
        <label for='customerRef'>Customer Reference:</label>
        <input type='text' name='customerRef' maxlength='150' id='customerRef' value='' placeholder='Reference details'>
        <input type='button' id='cset' value='Set'>
    </div>

还有我现在的 JS：

$( document ).ready(function() {
    $("#cset").click(function () {
        var lister = $("#custRefTable").find("a");
        var customerData = $("#customerRef").value;
        customerData = encodeURIComponent(customerData);
        $(lister).each(function () {
            $(this).href = $(this).href + "&custNote=" + customerData;
        });
    });

});

我没有收到控制台错误，而且锚点也没有更新；参考编号cset。

意图是：

用户输入文本；按下按钮输入，文本值被转换为安全的 URL，并附加到上表中的每个锚点。

因此，例如在文本机器人中，我写“大树”并按“设置”；然后当点击表格中的任何锚点时；它去：

  toggle.php?date=2020-01-10&custNote=great%20trees

我错过了什么或做错了什么？！

标签： javascriptjqueryhtmlanchor

解决方案

据我所知，href不是setter方法，而只是getter。您可以使用attr在 jQuery 中执行此操作，如下所示：

$(this).attr('href', $(this).attr('href') + "&custNote=" + customerData);

或者干脆省略 jquery 包装器并使用setAttribute

this.setAttribute(this.href, this.href + "&custNote=" + customerData);

如何防止我的代码添加多个 &custNote= 值？如果我单击“设置”两次，则值会添加两次：

toggle.php?date=2020-01-22&custNote=Horses and cheese&custNote=fielding

为此，您可以split使用 & 符号上的 href 值，获取这个新形成的数组的第一个索引，然后像以前一样附加其余的索引：

$(this).attr('href', $(this).attr('href').split('&')[0] + "&custNote=" + customerData);

推荐阅读