H3标签中的jQuery值替换为文本框中的值答案

【问题标题】：jQuery value in H3 Tag replace by value from Text BoxH3标签中的jQuery值替换为文本框中的值
【发布时间】：2011-12-05 16:03:14
【问题描述】：

我有一个 h3 标签

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

我有一个文本框。当在该 TextBox 中键入 Some 值时

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

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

应替换为文本框中的值。

我该怎么做？谁能帮我解决这个问题？

谢谢

【问题讨论】：

【解决方案1】：

试试：

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

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

【讨论】：

【解决方案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(...)，它实际上改变了锚的文本。

【讨论】：

【解决方案3】：

好的，首先你绑定到输入的模糊事件，然后，获取文本输入的值并将链接文本替换为该值：

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

【讨论】：

【解决方案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()。

【讨论】：