Question

如何在不丢失输入字段的情况下将“2年订阅”更改为“2年：”

<div class="radioOption subscription1Col3">
<input class="buyNow" type="radio" name="product2" value="6_0" checked="">2 Year Subscription</div>

Answer 1

这个相对简单，我建议如下（虽然目前未经测试）：

var input = $('.radioOption.subscription1Col3 input'),
    text = input[0].nextSibling.nodeValue,
    newText = text.replace(/ subscription/i,': ');
input[0].nextSibling.nodeValue = newText;

JS Fiddle demo

或者可能首选此版本，因为它将调整后的文本包含在label元素中，这有助于UI，并使以后更容易定位该文本内容：

var input = $('#inputID'),
    label = $('<label />',{'for' : 'inputID'})
    .text(input[0].nextSibling.nodeValue.replace(/ Subscription/i,': '));
input.parent().empty().append(input, label);

JS Fiddle demo

但这确实需要input具有id属性，以便label在语义上附加到input。

Answer 2

另一种方法是更改textContent

$('.buyNow')[0].nextSibling.textContent = "New Content"

Answer 3

jQuery不支持访问文本节点，只支持元素，因此您需要在Javascript中使用DOM方法来访问文本节点：

var nodes = $('.radioOption')[0].childNodes;
nodes[nodes.length-1].nodeValue= '2 Year';

演示：http://jsfiddle.net/Guffa/PDqQW/

如果在文本周围放置一个元素：

<div class="radioOption subscription1Col3">
  <input class="buyNow" type="radio" name="product2" value="6_0" checked="">
  <span>2 Year Subscription</span>
</div>

然后你可以使用jQuery来访问它：

$('.radioOption span').text('2 Year');

演示：http://jsfiddle.net/Guffa/tRdYa/

在输入字段后更改文本

3 个答案: