如何使用jquery更改标签标签内的文本

问题描述：

如何将文本Add Your Image更改为Change Your Image。如何使用jquery更改标签标签内的文本

<label class="control-label col-md-offset-4 col-md-4 btn green feedbackImg" style="text-align:center;"> 
    Add Your Image 
    <input type="file" name="data[Feedback][img]" class="form-control hide single_img_btn" id="1" style="display: none;"> 
</label>

$('.feedbackImg').text('Change Your Image');

但它改变了label如下：

<label class="control-label col-md-offset-4 col-md-4 btn green feedbackImg" style="text-align:center;"> 
    Add Your Image 
</label>

这意味着它删除输入标签也。我怎样才能保持除文本以外的所有相同内容？

答

如果你可以改变你的HTML后来干脆换你想在一个span改变使文字更容易选择：

<label class="control-label col-md-offset-4 col-md-4 btn green feedbackImg" style="text-align:center;"> 
    <span>Add Your Image</span> 
    <input type="file" name="data[Feedback][img]" class="form-control hide single_img_btn" id="1" style="display: none;"> 
</label>

$('.feedbackImg span').text('Change Your Image');

如果你不能改变的HTML，那么你将需要修改你的JS代码中检索和修改textNode本身：

$('.feedbackImg').contents().first()[0].textContent = 'Change Your Image';

答

您需要更新textNode

contents() - 为获得包括文本的所有节点和评论
eq() - 获得第一个元素，这是textNode（标签）
replaceWith() - 更新文本内容与新的文本

CODE：

$('.feedbackImg').contents().eq(0).replaceWith('Change Your Image');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<label class="control-label col-md-offset-4 col-md-4 btn green feedbackImg" style="text-align:center;"> 
 
    Add Your Image 
 
    <input type="file" name="data[Feedback][img]" class="form-control hide single_img_btn" id="1" style="display: none;"> 
 
</label>

$('.feedbackImg').contents()[0].nodeValue = 'Change Your Image';

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<label class="control-label col-md-offset-4 col-md-4 btn green feedbackImg" style="text-align:center;"> 
 
    Add Your Image 
 
    <input type="file" name="data[Feedback][img]" class="form-control hide single_img_btn" id="1" style="display: none;"> 
 
</label>

答

更改HTML这个

<label class="control-label col-md-offset-4 col-md-4 btn green feedbackImg" style="text-align:center;"> 
    <span class="image_label">Add Your Image</span> 
    <input type="file" name="data[Feedback][img]" class="form-control hide single_img_btn" id="1" style="display: none;"> 
</label>

然后在jQuery的

$('.image_label').text('Change Your Image');

如何使用jquery更改标签标签内的文本

相关推荐