Question

我是Jquery的新手。我希望在更改输入框时更改标签文本。我的输入框名称为电子邮件。

<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

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

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

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

3 个答案: