javascript - Jquery 使用内部输入更改标签文本

Question

我是 Jquery 的新手。我想在更改输入框时更改标签文本。我有名称为 email 的输入框。

<input type="text" name="email" id="email" />

当输入框更改时，我想将标签文本设置为:发送副本到我的邮箱:mail@example.com

<label for="sendCopy">
<input id="sendCopy" type="checkbox" checked="" name="copy"></input>
    Send copy to my mail
</label>

我有这个 Jquery 代码:

$(function () {
    $("#email").keyup(function () {
        var email = $("#email").val();
        $("label[for='sendCopy']").val('Send copy to my mail: ' + email);
    });
});

但是当 keyup 函数被触发时，标签被右移，但内部输入被删除。

<label for="sendCopy">
   Send copy to my mail mail@example.com
</label>

我希望你能理解我的问题。

Answer 1

您可以将标签的文本包裹在 span 中，以便于选择:

$("#email").keyup(function() {
  $('label[for="sendCopy"] span').text('Send copy to my mail: ' + $(this).val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" name="email" id="email" />

<label for="sendCopy">
  <input id="sendCopy" type="checkbox" checked="" name="copy" />
  <span>Send copy to my mail</span>
</label>

或者，您可以保持 HTML 不变并直接修改 textNode。

$("#email").keyup(function() {
  var textNodes = $('label[for="sendCopy"]').contents().filter(function() {
    return this.nodeType == 3;
  });
  textNodes[textNodes.length - 1].nodeValue = 'Send copy to my mail: ' + $(this).val();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="email" />

<label for="sendCopy">
  <input id="sendCopy" type="checkbox" checked="" name="copy" />
  Send copy to my mail
</label>