Ich bin ein Freund von multifunktionalen Buttons, gerade auf Smart Phones mit nur begrenzem Platz an Bedienelementen. Man belegt eine Taste mit mehreren Funktionen. Bestes Beispiel wäre ein „on“ und „off“ Knopf. Noch raffinierter sind Buttons mit mehr als zwei Funktionen.

Ich habe ein kleines JavaScript Beispiel geschrieben. Ich habe wenig jQuery verwendet. Läßt sich leicht in reines JS umschreiben. Umgesetzt habe ich den multiplen Button mittels JavaScript Switch Statement.

Ich denke, der Code ist leicht verständlich. Ich setze bei jedem Switch den Zähler um einen hoch und beim Letzten wieder auf den Ursprung zurück.

Etwas CSS im Header um den Button zu visualisieren:

#mybutton {
	background-color: lime;
	width: 200px;
	height: 60px;
	text-align: center;
	font-size: 40px;
	line-height: 60px;
	text-transform: uppercase;
	font-family: sans-serif;
}

Das ist der HTML Button:

<div id="mybutton">off</div>

Und zuletzt das Javascript:

var i = 1;
 
$('#mybutton').click(function() {
 
	switch (i) {
	case 1:
		$(this).text("on");
		i = 2;
		console.log("next: ", i);
		break;
	case 2:
		$(this).text("mute");
		i = 3;
		console.log("next: ", i);
		break;
	case 3:
		$(this).text("off");
		i = 1;
		console.log("next: ", i);
		break;
	}
 
});