Question

<label>
  Auto zoom 
  <input type="checkbox" class="js-switch" id="autoZoom" data-switchery="true" style="display: none;">
  <span class="switchery switchery-small" style="box-shadow: rgb(223, 223, 223) 0px 0px 0px 0px inset; border-color: rgb(223, 223, 223); background-color: rgb(255, 255, 255); transition: border 0.4s, box-shadow 0.4s;">
    <small style="left: 0px; transition: background-color 0.4s, left 0.2s;"></small>
  </span>
</label>

我上面有这个代码，我想替换＆＃34;自动缩放＆＃34;到＆＃34;测试＆＃34;，我该怎么做？

$("#div label:contains('Auto zoom')").text("Test");

我尝试使用上面的代码，这显然不起作用，它也会删除后面的输入类型复选框...

Answer 1

尝试代码：只需删除＃和Div

即可

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<label>Auto zoom <input type="checkbox" class="js-switch" id="autoZoom" data-switchery="true" style="display: none;"><span class="switchery switchery-small" style="box-shadow: rgb(223, 223, 223) 0px 0px 0px 0px inset; border-color: rgb(223, 223, 223); background-color: rgb(255, 255, 255); transition: border 0.4s, box-shadow 0.4s;"><small style="left: 0px; transition: background-color 0.4s, left 0.2s;"></small></span></label>

<script type="text/javascript">
$(document).ready(function(){
$("label:contains('Auto zoom')").text("Test");
});
</script>

Answer 2

我建议将文字包裹在span标记。

$(".labelTitle").text("Test");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>
<span class="labelTitle">Auto zoom </span>
<input type="checkbox" class="js-switch" id="autoZoom" data-switchery="true" style="display: none;">
<span class="switchery switchery-small" style="box-shadow: rgb(223, 223, 223) 0px 0px 0px 0px inset; border-color: rgb(223, 223, 223); background-color: rgb(255, 255, 255); transition: border 0.4s, box-shadow 0.4s;">
<small style="left: 0px; transition: background-color 0.4s, left 0.2s;"></small>
</span>
</label>

Answer 3

最简单的方法是将文本包装在另一个元素中，如span，然后更改text()。

假设您无法更改HTML，那么您可以使用contents()执行所需操作并检索第一个textNode，如下所示：

var label = $('label').contents().filter(function() {
  return this.nodeType == 3 && this.nodeValue.trim();
})[0];

label.nodeValue = label.nodeValue.replace('Auto zoom', 'Test');

.switchery-small {
  box-shadow: rgb(223, 223, 223) 0px 0px 0px 0px inset;
  border-color: rgb(223, 223, 223);
  background-color: rgb(255, 255, 255);
  transition: border 0.4s, box-shadow 0.4s;
}

.switchery-small small {
  left: 0px;
  transition: background-color 0.4s, left 0.2s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>
  Auto zoom Foo Bar
  <input type="checkbox" class="js-switch" id="autoZoom" data-switchery="true" style="display: none;">
  <span class="switchery switchery-small">
    <small></small>
  </span>
</label>

另请注意，我将内联style属性移出外部样式表中的规则。这样做要好得多，因为它会破坏HTML并将HTML与样式分开。

Answer 4

你必须选择：：

$("label:contains('Auto zoom')").text('Test');

用你的jquery：

$（＆＃39;＃DIV＆＃39;）...

您正在选择element id='div'。如果你可以在标签元素中添加id或类，那就太容易了，比如：

<label id='label_test'> Auto zoom...</label>

然后你可以这样做：

$('#label_test').text("Test");

希望它有所帮助！

如何使用jquery替换<label>中的文本

4 个答案: