隐藏禁用按钮并显示另一个

Question

所以我使用的是引导表单向导，我的导航按钮如下所示：

<ul class="pager wizard">
    <li class="previous">
        <a href="#">Prev</a>
    </li>
    <li class="next">
       <a href="#">Next</a>
    </li>
</ul>

当我到达最后一步时，下一个按钮被禁用，我希望它被提交按钮取代。

Answer 1

Aboud Jouda 我假设基于某种逻辑，你会知道你到达了最后一步。首先将一个类添加到下一个标签中。然后执行下面的函数executeThisOnFinalStep((来更改超链接文本，删除下一个类并添加最终类。基于此，将执行不同的onClick函数。

<li class="next">
      <a href="#" class="atag">Next</a>
</li>
function executeThisOnFinalStep() {
   $(".pager.wizard.next.atag").html("Submit");
   $(".pager.wizard.next.atag").addClass("final");
   $(".pager.wizard.next.atag").removeClass("next");
}
//Your onClick Functions.
$(".pager.wizard.next.atag").onClick(){
   //write your next logic here
}
$(".pager.wizard.final.atag").onClick(){
   //write your submit logic here
}

Answer 2

你试试这个代码：

<ul class="pager wizard">
    <li class="previous">
        <a href="#">Prev</a>
    </li>
    <li class="next">
       <a href="#">Next</a>
    </li>
</ul>

JavaScript 代码与 jQuery ：

 var finalSteps = 3
    var steps = 3;
    if (steps == finalSteps) {
      $('.next').remove();
      $('.pager.wizard').append('<li><a href="#">submit</a></li>')
    }