如何在功能之间切换？

Question

HTML

<button type="button" class="btn" name="showAllBtn" onClick="showAllSteps()">Show all</button>

JS

function showAllSteps()
{
//code  
}
function nextStep()

{
//code
}

如果我单击“显示全部”按钮，则应在这两个功能之间切换。有人可以帮助我吗？

Answer 1

您可以使用dataset来存储点击状态，

document.querySelector("button[name='showAllBtn']").addEventListener("click",function(){
  var state = this.dataset.clicked;
  state = state || true;
  ((state) ? showAllSteps : nextStep)();
  this.dataset.clicked = !state;  
},false);

编辑： True / false似乎会导致一些问题与上面的代码。 因此，我在上面做了一些调整，在下面进行了说明。

document.querySelector("button[name='showAllBtn']").addEventListener("click",function(){
  var state = this.dataset.clicked;
  state = typeof state == "undefined" ? "Y" : state;
  ((state == "Y") ? showAllSteps : nextStep)();
  this.dataset.clicked = (state == "Y") ? "N" : "Y"; 
},false);

演示

Answer 2

function showAllSteps() {
    alert('showAllSteps');    
    expectedFunc = function() { nextStep(); };
}

function nextStep() {
    alert('nextStep');     
    expectedFunc = function() { showAllSteps(); };
}

function toggleFunction() {
    expectedFunc();
}

var expectedFunc = function() { showAllSteps(); };

<button type="button" class="btn" name="showAllBtn" onclick="toggleFunction()">Show all</button>

此处的JsFiddle（针对IE更新）： https ://jsfiddle.net/t0g6ayhq/2/