ボタンのクリックで順次複数の機能を切り替えます

Question

私は独立した機能のセットを持っています - fn1()、fn2()、fn3()、fn4()です。

バックfn1()

へ[クリック] [クリック] fn4() fn3() [クリック] fn2() [CLICK]私は一度に実行されている一つの機能を必要とするが、機能がシーケンス fn1()で、単一のボタンのクリックで、切り替える必要があります

どのようにこの問題にアプローチしますか？あなたはmyclick呼び出す

Answer 1

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++; 
} 

毎回、それは1つのFNを実行し、私に1を加算します。次回は2番目のfnを実行し、次に3番目のfnを実行します。

Answer 2

あなたがしようとしていることを理解していれば、1つの要素の連続したクリックに対して別の機能を実行する必要があります。あなたが最後に到達すると、配列の先頭に戻るには、剰余演算子を使用して、各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 3

クロージャを使用して、実行する機能を追跡することができます。

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 4

あなたがこの方法を試すことができます。

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); 

Answer 5

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

Answer 6

<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/