Javascript jQuery切换/循环3个状态_Javascript_Jquery

Javascript jQuery切换/循环3个状态

javascript jquery

Javascript jQuery切换/循环3个状态,javascript,jquery,Javascript,Jquery,我有一个按钮，我需要运行3个状态。静音，开和关 <html> <head>  <style type="text/css"> .mute{ background:gray } .on { background:green } .off { background:red } </style>

我有一个按钮，我需要运行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>


.mute{背景：灰色}
.on{背景：绿色}
.off{背景：红色}
功能切换状态（项目）{
如果（item.className==“静音”）{
item.className=“on”；
}else if（item.className==“on”）{
item.className=“off”；
}否则{
item.className=“静音”；
}
}

我如何使用jQuery而不是普通的JavaScript循环完成这个任务

$("#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 ready（）函数下即可。

试试看

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

演示：

试试这个：

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扩展为任何更大的数

这是JSFIDLE

另一种情况

如果元素中有其他类，则可以使用以下代码，但它更复杂

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

这是JSFIDLE

在不使用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 );   

});

函数过滤器（val）{
如果（val==1）{
$（'#RangeFilter'）.removeClass（'rangeAll'）.removeClass（'rangePassive'）.addClass（'rangeActive'）；
$（“span”）.text（“活动”）；
} 
else if（val==2）
{ 
$（'#RangeFilter'）.removeClass（'rangeActive'）.removeClass（'RangeAssive'）.addClass（'rangeAll'）；
$（“span”）。文本（“全部”）；
} 
如果（val==3）{
$（'#RangeFilter'）.removeClass（'rangeAll'）.removeClass（'rangeActive'）.addClass（'RangeAssive'）；
$（“span”）。文本（“被动”）；
}
}


全部的

你能解释一下这一行吗

var index=（classNames.indexOf（className）+1）%classNames.length？为什么是“%classNames.length”？@AhmadAlfy它确保索引小于classNames.length
，并且可以得到正确的元素。我有点困惑，我不明白它如何总是返回正确的索引：）每当数字增加：）@AhmadAlfyclassName
每次都会变化，因此，索引发生了变化。您可以将其打印出来以查看。在向元素添加另一个类时，此操作将失败。虽然@pktangyue代码看起来非常酷（+1），但此代码和SudipPal的代码使我能够灵活地将更多代码行轻松添加到所选状态，谢谢。@ArunPJohny如果用户还有一个“打开”状态，每一行都必须使用if..else if..进行更新并降低可读性。。
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>