如何使用 jQuery 更改特定文本？答案

【问题标题】：how to change specific text by using jQuery?如何使用 jQuery 更改特定文本？
【发布时间】：2012-10-30 04:57:04
【问题描述】：

我有这个 html 代码：

<label class="checkbox" id="check_rem0">
    Checkbox
    <input type="checkbox" disabled="disabled" id="form_checkbox_0">
</label>

有没有办法只替换标签中的文本，在我的情况下为Checkbox，而不删除/替换输入？

如果我这样做$('.checkbox').text('Anoteher Checkbox') 我会得到：

<label class="checkbox" id="check_rem0">
    Anoteher Checkbox
</label>

另外，我不一定知道那里会有什么文字。

【问题讨论】：

您可以使用 .html 获取 html，然后将其替换，但您将丢失复选框中存储的所有事件或数据。可能最好在这个上使用本机javascript，直接选择节点并更改它。
html好像也有同样的效果
如果您正确使用它，则不会。 $(".checkbox").first().html($(".checkbox").first().html().replace("Checkbox","Another Checkbox"));

标签： javascript jquery html text replace

【解决方案1】：

不要将输入嵌套在标签中。将两者与<label for="form_checkbox_0"> 关联。这样您就可以随心所欲地操作文本。

<label class="checkbox" id="check_rem0" for="form_checkbox_0">
    Checkbox
</label>
<input type="checkbox" disabled="disabled" id="form_checkbox_0">

【讨论】：

出于某种原因，jquery 会这样生成它：var checkbox = $("<label/>", {text: "Checkbox"}).appendTo(checkbox_span); $("<input/>", {type: "checkbox"}).appendTo(checkbox);
您可以将您的表单生成代码添加到问题中吗？这肯定会使问题复杂化。也就是说，您可以将appendTo 更改为insertAfter，这样它就不会插入标签内部，而是插入标签之后。
您还应该切换添加对象的顺序，以确保添加到实时 DOM 是最后一个操作。
+1 我完全同意。如果您需要符合 WCAG，则不应像 @Mathletics 所说的那样嵌套您的输入。另见w3.org/TR/WCAG20-TECHS/F68.html

【解决方案2】：

$('#check_rem0').html('Another text <input type="checkbox" disabled="disabled" id="form_checkbox_0">');

或者更准确地说：

var a = $('#check_rem0').html();
b = a.replace('Checkbox', 'Another text');
$('#check_rem0').html(b);

【讨论】：

我正在考虑这个解决方案，但我不知道要替换的文本
你不知道还是你不想？你说“有没有办法只替换标签中的文本”。我工作，我在这里测试过：jsfiddle.net/paulalexandru21/dCSRy

【解决方案3】：

将 label = 中的 'for' 参数设置为输入元素的 id。

<label for="form_checkbox_0" class="checkbox_0_label>Checkbox</label>
<input type="checkbox" disabled="disabled" id="form_checkbox_0">

然后是你的 JS：

$('.checkbox_0_label').text('Another Checkbox')

【讨论】：

【解决方案4】：

您的 HTML 应如下所示：

<label class="checkbox" id="check_rem0" for="form_checkbox_0">
    Checkbox
</label>
<input type="checkbox" disabled="disabled" id="form_checkbox_0">

将其作为您的 HTML，您可以执行以下操作：

$("#check_rem0").text("Another checkbox");

【讨论】：

【解决方案5】：

一般来说，每当我有特定的文本要替换时，我会将其包装在带有 ID 的 <span> 中，并改为更改 span 的文本。

例如：

...
<h1>This is a heading with some <span id="change">embedded text</span> I'd like to change </h1>
...
<script type="text/javascript">
    $(document).ready(function() {

         $("#change").html("changed text");
    });
</script>

编辑：将承认这不是问题内容中提到的问题的好解决方案 - 但认为它很好地回答了标题。

【讨论】：

这不回答 OP 的问题，它避免了它。
它既回答了文本中引用的特定问题，也回答了标题中引用的更通用的问题。任何人都应该能够从我的回复中推断出 OP 可以轻松地将文本包装在 <span> 中以隔离它并仅以这种方式更改文本。这以什么方式避免这个问题？
不，它描述了您如何执行类似的任务。在 OP 建议使用标签、输入和建议将有多个复选框的聚合解决方案中，这种对实际问题的回避将导致实现非常不整洁。
这也会导致非语义标记，对于那些关心它的人来说。（我愿意。）
那么我很抱歉。我的印象是人们有时会浏览 stackoverflow 来寻找可能与 OP 相似但不完全相同的问题的答案。在这种情况下，我认为许多希望这样做的人会浏览一个名为 how to change specific text by using jquery 的问题 - 并不总是在包含文本和输入的表单标签的上下文中。