javascript - Javascript 其他功能每次点击

Question

我是 JavaScript 新手，我想每次都调用另一个函数，例如：

onclick="on first click a(), then b(), etc "

当然它不会像这样工作，但有没有办法做到这一点？

谢谢！

Answer 1

将函数存储在合理的数据结构中。由于您想按顺序访问它们，请将其设为数组。

function a() { };
function b() { };
function c() { };
function d() { };

var myFunctions = [a, b, c, d];

然后跟踪您接下来要调用的函数：

var nextFunction = 0;

然后，每次调用其中一个函数时，递增指针。

function myFunctionSwitcher() {
    myFunctions[nextFunction]();
    nextFunction = nextFunction + 1;
}

然后，将其用作事件处理程序：

document.getElementById('whatever').addEventListener('click', myFunctionSwitcher);

nextFunction添加一些逻辑以0在到达数组末尾时重置。

Answer 2

是的，当然有。总是调用同一个函数，让被调用的函数决定接下来会发生什么：

<script>
  var count = 0;
  function myClickHandler() {
    switch(count) {
      case 0:
        a();
        break;
      case 1:
        b();
        break;
    }
    count++;
  }
</script>
<div onclick="myClickHandler()"></div>

当然，这是最易读的初学者版本。有关更高级的示例，请参阅昆汀的回答。

Answer 3

解决方案一

HTML

<button>Click me</button>

Javascript

// array of functions
var functions = [
    function () { alert("First function") },
    function () { alert("Second function") },
    function () { alert("Third function") },
    function () { alert("Clicked more than three times.") }
];

// all buttons
var anchors = document.getElementsByTagName('button');

// the counter
var i = -1;

// detect the click for first button
anchors[0].onclick = function() {    
    // call the functions using i variable
    if (i < 3) {
        // increment i
        functions[++i]();
    }
    else {
        functions[3]();
    }
}

JSFIDDLE

---

解决方案二

我建议在 HTML 中使用data-*属性，例如data-func.

HTML

<button data-func="0">1</button>
<button data-func="1">2</button>

纯Javascript

// an array of functions
var functions = [
    function () { alert("First function") },
    function () { alert("Second function") }
];

// all buttons
var anchors = document.getElementsByTagName('button');

// detect click for each button
for(var i = 0; i < anchors.length; i++) {
    var anchor = anchors[i];
    anchor.onclick = function() {
        // get data-func attribute
        var foo = parseInt(this.getAttribute("data-func"));
        // run the function from array
        functions[foo]();
    }
}