將動態文本添加到錨鏈接 URL 查詢

Question

我有一組由另一個系統生成的錨點。

錨點是切換錨點，因此是真/假開關。

我需要向其中添加用戶輸入的自定義文本。 我想我可以使用 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;
        });
    });

});

我沒有收到控制台錯誤，但也沒有更新錨點； 參考 ID cset 。

意圖是：

用戶輸入文本； 按鈕輸入被按下，文本值被轉換為 URL 安全並附加到上表中的每個錨點。

例如，在文本機器人中，我寫了“大樹”並按“設置”； 然后當點擊表格中的任何錨點時； 它轉到：

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

我錯過了什么或做錯了什么？！

Answer 1

據我所知， href不是一個 setter 方法，而只是一個 getter。 你可以在 jQuery 中使用attr這樣做：

$(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);