Question

我想操纵HTML代码（链接目标），具体取决于表单输入的值。一旦用户更改了输入的值，我就希望更新链接目标的值。

<a href="/#SINGULAR/.htm">foo</a>
<input type="text" name="singular" id="singular">
<script>
$('#singular').on('input', function() {
  //Change the link HREF.
});
</script>

Answer 1

所以你有绑定，所以现在你只需要定位链接并更改它。我建议在上面加上一个类或id。

$(selector).prop('href', newValue);

如果你想把他们在输入中键入的内容作为新值只是

$(selector).prop('href', this.value);

$('#singular').on('input', function() {
  $('#myLink').prop('href', this.value);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a href="/#SINGULAR/.htm" id="myLink">foo</a>
<input type="text" name="singular" id="singular">

Answer 2

如果要在文本框中键入内容时执行某些操作，则应使用keyup事件。要获取此文本框的值，您可以使用val() this引用方法（将指向所需的文本框）。

$('#singular').on('keyup', function() {
    console.log($(this).val());
});

或者：

$('#singular').keyup(function() {
    console.log($(this).val());
});

输入值更改时更改链接HREF属性

2 个答案: