Question

我有一套独立的功能 - fn1()，fn2()，fn3()，fn4()。

我一次只需要运行一个功能但功能应该按照单个按钮切换，按顺序fn1() [点击] fn2() [点击] fn3() [点击] fn4() [点击]返回fn1()

如何处理此问题？

Answer 1

如果我已经理解了您要做的事情，那么您希望在单个元素的连续点击上运行不同的功能。

要做到这一点，你可以将每个函数放在一个数组中，然后使用模运算符遍历每个函数，一旦到达结束就返回到数组的开头，如下所示：

var functions = [function() {
  console.log('first');
}, function() {
  console.log('second');
}, function() {
  console.log('third');
}, function() {
  console.log('fourth');
}];

$('button').click(function() {
  var i = ($(this).data('i') + 1) || 0;
  functions[i % functions.length]();
  $(this).data('i', i);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Click me</button>

Answer 2

您可以使用闭包来跟踪您要执行的功能。

HTML：

<button type="button" onclick="foo()"></button>

JS：

var foo = (function() {
    var funcIndex = 0;
    return function() {
        switch(funcIndex) {
            case 0: func1(); break;
            case 1: func2(); break;
            case 2: func3(); break;
            case 3: func4(); break;
        }

        funcIndex = (funcIndex+1) % 4;
    }
})();

Answer 3

function fn1(){}
function fn2(){}
function fn3(){}

var i = 1;

function myclick(){
   if (i == 1)
      fn1();
   elseif (i == 2)
      fn2();
   elseif (i == 3) {
      fn3();
      i = 1;
   }

   i++;
}

每当你调用myclick时，它会运行一个fn，然后将i加1。下次运行第二个fn，然后是第三个。

Answer 4

arr=[fn1,fn2,fn3,fn4];
var i=0;
$("buttonId").click(function(){
   arr[i%4]();
   i++;
})

Answer 5

<button onclick="toogle()">Click Me</button>

然后

var index = 0;
var funcArr= [f1,f2,f3,f4];
function toogle(){
  funcArr[index]();
  index++;
  index = index%funcArr.length;
}

function f1(){console.log("f1")};
function f2(){console.log("f2")};
function f3(){console.log("f3")};
function f4(){console.log("f4")};

https://jsfiddle.net/8chvusaq/

Answer 6

您可以尝试这种方法：

function fn1()
{
    //do something
    $("#myButton").off("click");
    $("#myButton").click(fn2);
}

function fn2()
{
    //do something
    $("#myButton").off("click");
    $("#myButton").click(fn3);
}

function fn3()
{
    //do something
    $("#myButton").off("click");
    $("#myButton").click(fn4);
}

function fn4()
{
    //do something
    $("#myButton").off("click");
    $("#myButton").click(fn1);
}

$("#myButton").click(fn1);

按钮单击时按顺序切换多个功能

6 个答案: