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>

Answer 2

只是改变

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

到

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

Answer 3

您正在将标签的内容更改为文本，因此其中的输入被删除，输入是值的一部分。

您必须将输入放在标签之外，在它之前。