动态更改文本

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

您的ajax成功将如下所示：

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

         }
     });
});

Answer 2

试试这个：

​

$(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 3

我想你可以使用：

​

$("#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>

​