jQuery切换/通过3状态循环

我有一个按钮，我需要通过3状态运行。例如：静音，开和关jQuery切换/通过3状态循环

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

我怎么可以循环通过这个使用jQuery，而使用普通的JavaScript

来源

2013-03-20 Syed

尝试

$(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"); 
     } 
    }) 
})

演示：Fiddle

来源

2013-03-20 09:50:20

虽然@pktangyue代码看起来超爽（+1），但这并SudipPal的代码很容易让我灵活地添加更多的代码来选中状态，谢谢。 – Syed 2013-03-20 10:50:48

downvoters请解释 – 2013-03-20 11:03:11

@ArunPJohny如果用户有一个更多的状态'打开'，每一行都必须更新和更少的可读性，如果.. ..如果.. – rab 2013-03-20 12:14:26

$("#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"); 
      } 
     } 
});

你不需要添加任何的onclick功能，只需把它放在下jQuery的准备（）函数。

来源

2013-03-20 09:46:51

试试这个：

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

在这段代码，className是老班。然后通过classNames数组得到新类，然后返回它。

并且在返回之前，应该删除旧的类。

并用此方法，您可以轻松地扩展3到任何更大的数字。

这里是jsfiddle。 http://jsfiddle.net/f3qR3/2/

另一种情况

如果有其他类中的元素，你可以使用下面的代码，但它是比较复杂的。

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

这里是jsfiddle。 http://jsfiddle.net/f3qR3/4/

来源

2013-03-20 10:01:44 pktangyue

+1有礼貌和不使用if/else – 2013-03-20 10:12:58

你能请解释这行'var index =（classNames.indexOf（className）+ 1）％classNames.length;'？你为什么'％classNames.length'？ – 2013-03-20 10:19:47

@AhmadAlfy它确保'index'小于'classNames.length'，并且可以得到一个正确的元素。 – pktangyue 2013-03-20 10:22:23

试试这个，而不使用if和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); 

});

来源

2013-03-20 10:40:13 rab

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>

来源

2016-05-03 08:45:01 tuncergulcann

jQuery切换/通过3状态循环

回答

相关问题