動態更改文本

Question

是否可以動態更改此HTML中的排序？

<li><a href="#step-4"> 
    <label class="stepNumber">4</label> 
    <span class="stepDesc"> 
    Finish<br /> 
    <small>LAST STEP</small> 
    </span>     
</a></li> 

我有一個id爲'finish'的按鈕，點擊後會通過ajax提交一些數據。一旦完成，我想更改上面的詞語：

完成應該完成 最後一步應該完成。

我能做到這一點嗎？

感謝

$('#finish').click(function() { 

}); 

Answer 1

試試這個：

$(document).ready(function() { 
 
    $('#finish').on('click',function(event) { 
 
     $('.stepDesc')[0].innerHTML = 'Finished<br /><small>COMPLETED</small>' 
 
    }); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<li><a href="#step-4"> 
 
    <label class="stepNumber">4</label> 
 
    <span class="stepDesc"> 
 
    Finish<br /> 
 
    <small>LAST STEP</small> 
 
    </span>     
 
</a></li> 
 

 
<button id="finish">Finish</button>

而只是以供將來參考。如果僅僅因爲性能改變文字使用text()而不是innerHTML。所以可能在這裏使用text()的其他答案在性能上比我的好，但我會讓我留在這裏以獲得多樣性。

Answer 2

更改text到finished再追加small tag.This將幫助 -

$('#finish').click(function() { 
    $('span.stepDesc').text('Finished').append('<br><small>Completed</small>'); 
}); 

Answer 3

你們是不是這樣？

$('#finish').click(function() { 
    $('.stepDesc small').text('Completed') 
}); 

Answer 4

你的AJAX的成功將是如下：

$('#finish').click(function() { 
    $.ajax({ 
     ... 
     ... 
     success:function(data) 
     { 
      $('span.stepDesc').text('Finished'); 
      $('span.stepDesc small').text('Completed'); 

     } 
    }); 
}); 

Answer 5

我想你可以使用：

$("#finish").click(function() { 
 
$("#step").text("COMPLETED"); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<button id="finish"> Finish </button> 
 
<li><a href="#step-4"> 
 
    <label class="stepNumber">4</label> 
 
    <span class="stepDesc"> 
 
    Finish<br /> 
 
    <small id="step">LAST STEP</small> 
 
    </span>     
 
    </a></li>

Answer 6

$('#finish').click(function() { 
$('.stepDesc').html('Finished<br /><small>COMPLETED</small>') 
}); 

Answer 7

$('#finish').click(function() { 
    $('.stepNumber .stepDesc').html('Finished<br/><small>completed</small>'); 
}); 

希望這個工程..