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>

プレーンJavaScriptを使用するのではなく、jQueryを使用してこれを循環させるにはどうすればよいですか？

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

onclick関数を追加する必要はありません。jqueryready（）関数の下に配置するだけです。

于 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 に答える