4

我有一个按钮，我需要通过 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 循环浏览这个

4

5 回答 5

7

尝试这个：

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-20T10:01:44.077 回答
1 
$("#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 don't need to add any onclick function, just placed it under jquery ready() function.

于 2013-03-20T09:46:51.757 回答
1

试试这个而不使用 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-20T10:40:13.817 回答
0

尝试

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

演示：小提琴

于 2013-03-20T09:50:20.587 回答
0 
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-03T08:45:01.967 回答