Question

可能是一个非常简单的问题需要解决，但我对 jQuery 不是很熟悉。我试过谷歌搜索这个问题，但我似乎找不到替代功能，或者我做错了这个。

所以基本上当我加载页面时，HTML 如下所示：

<div class="control control-department">
    <label><input type="radio" name="department" value="residential-sales">Residential Sales</label>
    <label><input type="radio" name="department" value="residential-lettings"> Residential Lettings</label>
</div>

然后我使用一些 jQuery 来替换按钮的文本，例如使用以下代码购买的住宅销售：

$( document ).ready(function() {
    $('.control-department label:nth-child(1)').text('BUY');
    $('.control-department label:nth-child(2)').text('RENT');
});

然而，一旦 jQuery 运行它，它就会给我以下 HTML 并删除 <input>。关于如何让它只替换“住宅销售”和“住宅出租”部分而不是整个事情的任何想法？

<div class="control control-department">
    <label>BUY</label>
    <label>RENT</label>
</div>

谢谢大家！

Answer 1

JQuery contents() 也返回文本节点，你可以像这样替换文本：

$( document ).ready(function() {
    $('.control-department label:nth-child(1)').contents().last().replaceWith('BUY');
    $('.control-department label:nth-child(2)').contents().last().replaceWith('RENT');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="control control-department">
    <label><input type="radio" name="department" value="residential-sales">Residential Sales</label>
    <label><input type="radio" name="department" value="residential-lettings"> Residential Lettings</label>
</div>

Answer 2

你可以这样试试：

$(document).ready(function() {
//loop through label
  $(".control-department label").each(function(i) {
    var child = $(this).children();//save children
    i % 2 == 0 ? $(this).text('BUY') : $(this).text('RENT')//change text
    $(this).prepend(child)//prepend children again
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="control control-department">
  <label><input type="radio" name="department" value="residential-sales">Residential Sales</label>
  <label><input type="radio" name="department" value="residential-lettings"> Residential Lettings</label>
</div>

Answer 3

使用一系列文本替换可以简化事情...

那么诀窍就是在更改文本之前存储 input，然后将 input 恢复到原来的位置。

let replacements = ["BUY", "RENT"]

$(".control-department label").each(function(index){
  
  // Temporarilly store the input
  let input = $(this).find("input")
  
  // Change the text using the replacement array
  this.innerText = replacements[index]
  
  // Re-inject the input
  $(this).prepend(input)
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="control control-department">
  <label><input type="radio" name="department" value="residential-sales">Residential Sales</label>
  <label><input type="radio" name="department" value="residential-lettings"> Residential Lettings</label>
</div>

Answer 4

解决方案：

1.HTML

<div class="control control-department">
<input type="radio" name="department" value="residential-sales"><label class="label-1">Residential Sales</label>
<input type="radio" name="department" value="residential-lettings"> <label class="label-2">Residential Lettings</label>

2.JS：

$( document ).ready(function() {
$('.control-department .label-1').text('BUY');
$('.control-department .label-2').text('RENT');

});

说明：

您使用 label 的方式有误
当您替换标签内的文本时，它也包含输入单选按钮，通过对其进行一些重构来修复。

编辑： 解决方案 2

既然你不能改变 HTML 结构，试试这个：

$( document ).ready(function() {

$('.control-department label:nth-child(1)').html('<input type="radio" name="department" value="residential-sales">Buy');
$('.control-department label:nth-child(2)').html('<input type="radio" name="department" value="residential-sales">Rent');

});

使用 jQuery 替换标签内的文本

4 个答案: