Geek Answers Handbook

JQuery Toggle / loop through 3 states

I have a button that I need to launch through 3 states. e.g. Mute, On and off

<html> <head> <!-- define mute/on/off styles --> <style type="text/css"> .mute{ background:gray } .on { background:green } .off { background:red } </style> <!-- define the toggle/cycle function --> <script language="javascript"> function toggleState(item){ if(item.className == "mute") { item.className="on"; } else if(item.className == "on") { item.className="off"; } else { item.className="mute"; } } </script> </head> <body> <!-- call 'toggleState' whenever clicked --> <input type="button" id="btn" value="button" class="mute" onclick="toggleState(this)" /> </body> </html>

How can I execute a loop using jQuery using simple JavaScript

+4
source share
5 answers

Try

 $(function(){ $('#btn').click(function(){ var $this = $(this); if($this.is('.mute')) { $this.toggleClass("mute on"); } else if($this.is('.on')) { $this.toggleClass("on off"); } else if($this.is('.off')) { $this.toggleClass("off mute"); } }) })

Demo: Fiddle

0
source

Try the following:

 var classNames = ['mute','on','off']; $('div').click(function () { $(this).toggleClass(function (i, className, b) { var index = (classNames.indexOf(className) + 1) % classNames.length; $(this).removeClass(className); return classNames[index]; }); });

In this code className is the old class. Then get the new class through the classNames array, and then return it.

And before returning, the old class must be deleted.

And with this method, you can easily expand from 3 to any larger number .

Here is the jsfiddle. http://jsfiddle.net/f3qR3/2/

Another situation

If the element has other classes, you can use the following code, but it is more complicated.

 var classNames = ['mute', 'on', 'off']; $('div').click(function () { var $this = $(this); $this.toggleClass(function (i, className, b) { var ret_index; $.each(classNames, function (index, value) { if ($this.hasClass(value)) { ret_index = (index + 1) % classNames.length; } }); $this.removeClass(classNames.join(' ')); return classNames[ret_index]; }); });

Here is the jsfiddle. http://jsfiddle.net/f3qR3/4/

+7
source 
 $("#btn").click(function( var this=$(this); if(this.hasClass('mute')) { this.removeClass("mute").addClass("on"); } else if(this.hasClass('on')) { this.removeClass("on").addClass("off"); } else { this.removeClass("off").addClass("mute"); } } });

You do not need to add any onclick function just by placing it under the jquery ready () function.

+1
source

try this without using if and else ..

 $('input[type=button]').click( function(){ var statemp = { mute: 'on', on: 'off', off :'mute' }; var toggle = $(this).attr('class') .split(' ') // Requires JavaScript 1.6 .map( function( cls ) { return statemp[ cls ] || cls ; }) .join(' '); $(this).attr('class','').addClass( toggle ); });
+1
source 
 function filterme(val){ if (val == 1){ $('#RangeFilter').removeClass('rangeAll').removeClass('rangePassive').addClass('rangeActive'); $("span").text("Active"); } else if (val == 2) { $('#RangeFilter').removeClass('rangeActive').removeClass('rangePassive').addClass('rangeAll'); $("span").text("All"); } else if(val==3){ $('#RangeFilter').removeClass('rangeAll').removeClass('rangeActive').addClass('rangePassive'); $("span").text("Passive"); } } <p class="range-field" style=" width:60px"> <input type="range" id="RangeFilter" name="points" onchange="filterme(this.value);" min="1" class="rangeAll" max="3" value="2"> </p> <span>All</span>
0
source

More articles:


All Articles