em JQuery seria isto:
$('body').toggle(
function(){
alert('A')
}, function(){
alert('B')
}, function(){
alert('C')
}, function(){
alert('D')
}
);
Ou seja, várias funções atribuídas ao corpo do seu documento seguindo uma ordem de execução.
Porém você quer em Javascript puro, eu aproveitei e também te proporcionei uma possibilidade de escolha de ordem, que seria no caso alterando o parametro da função toggle()
das funções A
,B
,C
, e D
você poderia fazer qual ordem quiser, ou repetir alguma função sem ter que incluir funções iguais novamente.
Essa seria a função toggle:
function toggle(aryFunctions,idx){
document.getElementsByTagName("body")[0].onclick = aryFunctions[idx];
}
E para utilizar declaramos um array de functions:
function A(){
alert('A');
toggle(aryFunctions,1);
}
function B(){
alert('B');
toggle(aryFunctions,2);
}
function C(){
alert('C');
toggle(aryFunctions,3);
}
function D(){
alert('D');
toggle(aryFunctions,0);
}
var aryFunctions = [A,B,C,D];
document.body.setAttribute("onclick","toggle(aryFunctions,0)");
Assim executaria:
A,B,C,D
Seria a forma correta circular em ordem, e estou atribuindo o clique à tag <body>
de seu html por isso não utilizando DOM.
Você pode mudar a ordem dinamicamente alterando o código das funções passadas.
Você também pode facilitar seu trabalho de adicionar funções dinamicamente colocando-as no aryFunctions
que seria um Array tornando seu trabalho bem mais fácil neste quesito.
Veja, se eu mudar as funções do array para:
function A(){
alert('A');
toggle(aryFunctions,3);
}
function B(){
alert('B');
toggle(aryFunctions,2);
}
function C(){
alert('C');
toggle(aryFunctions,0);
}
function D(){
alert('D');
toggle(aryFunctions,1);
}
var aryFunctions = [A,B,C,D];
document.body.setAttribute("onclick","toggle(aryFunctions,0)");
Assim executaria:
A,D,B,C
Desta maneira você tem bastante liberdade para fazer o tal toggle()
como preferir.