Question

我有一个按钮，我需要运行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来循环使用

Answer 1

试试这个：

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/

Answer 2

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

Answer 3

尝试此操作而不使用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 );   

});

Answer 4

尝试

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

Answer 5

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>

jQuery切换/循环3状态

5 个答案: