H3标记中的jQuery值替换为文本框中的值

Question

我有一个h3标签

<h3> <a href="#"> Initial Text</a></h3>

我有一个TextBox。 在TextBox

中键入Some值时

<input id="Medication" name="Medication" size="50" type="text" value="">

该锚链接中的值（初始文本）

应替换为TextBox中的值。

我该怎么做？ 任何人都能帮我这个吗？

由于

Answer 1

尝试：

$('#medication').blur(function(){
  var objVal = $(this).val();
  if(objVal != ''){
    $('h3 a').text(objVal);
  }
});

当文本框失去焦点时，这将附加blur()事件处理程序以执行提供的函数。该函数将检查该值是否已设置，如果是，则会更新<a>标记中的文本。

Answer 2

这取决于你希望何时更改锚中的文本，但是它将涉及将事件处理程序绑定到input元素。如果您希望在按下某个键时更改a文本，则可以绑定到keypress或keyup事件：

$("#medication").keyup(function() {
    $("h3 a").text($(this).val());
});

如果您希望在用户离开input时（换句话说，在blur事件中）更改文本，则可以绑定到blur事件：

$("#medication").blur(function() {
    $("h3 a").text($(this).val());
});

您可能希望在input模糊时更改文本，但仅在值已更改时才会更改。如果是这种情况，请绑定到change事件。

您可能甚至想要将处理程序绑定到多个这些事件，在这种情况下，您可以使用bind，它接受​​表示多个事件的字符串：

$("#medication").bind("keyup blur change", function() {
    $("h3 a").text($(this).val());
});

上述代码的重要部分是$(this).val()，它将获取用户输入input的值，而$("h3 a").text(...)实际上是更改了文本的{{1}}锚

Answer 3

好的，首先绑定到输入的blur事件，然后获取文本输入的值并用该值替换链接文本：

$('#Medication').bind('blur', function(){
     var val = $(this).val(); // get value of input
     $('h3 a').html(val); // replace text of link
});

Answer 4

我首先会在<a>标记或<h3>标记上放置ID。这将允许快速引用您尝试修改的锚点，并使代码更有效。

<h3> <a id="myAnchor" href="#"> Initial Text</a></h3>

<强>的JavaScript / jQuery的

$(document).ready(function () {
  $('#Medication').change(function () {
    $('#myAnchor').text($(this).val());
  });
});

注意以上内容使用了.change()。