jqueryを使用してラベルタグ内のテキストを変更する方法

Question

Add Your ImageをChange Your Imageに変更するにはどうすればいいですか？

<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> 

、それはまた、入力されたタグを削除することを意味します。テキストだけを除いてどうすればいいですか？

Answer 1

あなたはそれが簡単に選択できるようにすることspanに変更するテキスト折り返すだけで、あなたのHTMLを変更することができる場合：あなたがして、あなたがHTMLを変更できない場合

<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'); 

を

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

Answer 2

あなたはtextNode

を更新する必要があります。textNode自体を盗んし、修正するためにあなたのJSコードを修正する必要があります

1. contents() - テキストと
2. eq()コメントを含むすべてのノードを取得するための - textNode（ラベル）である第一の要素を取得
3. replaceWith() - 新しいテキスト

とテキストの内容を更新します

コード：

$('.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>

OR

$('.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>

Answer 3

変更この

<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> 

へのHTMLそしてjqueryの中

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