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狀態循環

回答

相關問題