如何使用 jquery 在 keyup 上更改/修改多个 href 的某些部分？

Question

我有一个带有值集的输入。

我有 2 个/多个 a 标签，其中第一个设置的输入值设置了 2 个不同的 hrefs

如果我更改 keyup 上的输入，我只想更改/修改之前的设置值，并保持 href 的其余部分相同，除了之前的值。 我有一个小提琴，它有点工作但不是很好，我在这里做错了。 任何帮助或建议将不胜感激。 https://jsfiddle.net/nlstm/do6eL1z4/1/

<input id="MYinput" type="text" value="test"></input> 

<br><br>
<a id="w3s" href="https://www.example1.com?q=">Test1</a>
<br>
<a id="w3s" href="https://www.example2.com?q=">Test2</a>
<br><br>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>


var OriginalValue = $("#MYinput").val(); 

$('a#w3s').each(function(){

    var allHrefs = $(this).attr("href");

    var FinalHrefs = allHrefs + OriginalValue;

    var CompleteHrefs = $(this).attr("href",FinalHrefs)


});





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

var textFromInput = $("#MYinput").val();   

$('a#w3s').each(function(){


    var urlKey = $(this).prop("href").split(OriginalValue)[0];

    var FinalHref = urlKey + textFromInput;

    var CompleteFinal = $(this).attr("href",FinalHref)


});

});





</script>

Answer 1

将您的链接从 id 更改为 class。 id 属性在整个文档中必须是唯一的。

另外，<input> 是一个 void 元素，因此不需要关闭 </input> 标记。

遍历您的链接并将原始href 值存储为数据项。详细了解 jQuery.data() 以及如何在元素上存储任意数据。

创建一个迭代链接的函数，该函数检索先前存储的原始 href 值、附加输入值并更新当前 href。注意encodeURI。

通过将此函数绑定到您的 keyup 事件侦听器来使用此函数，并同步调用该函数，以便将现有输入值附加到现有链接。

var links = $("a.link");

function appendInputValue () {
  links.each(function () {
    var currentValue = encodeURI($("input").val());
    var originalHref = $(this).data("originalHref");
    $(this).attr("href", originalHref + currentValue);
    console.log(originalHref + currentValue);
  });
}

links.each(function () {
  $(this).data("originalHref", $(this).attr("href"));
});

$("input").on("keyup", function () {
  appendInputValue();
});

appendInputValue();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="text" value="test">

<p><a class="link" href="https://www.example1.com?q=">Test1</a></p>
<p><a class="link" href="https://www.example2.com?q=">Test2</a></p>