动态更改文本

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()性能可能更好，但为了多样性，我会让我的留在这里。