Jquery click 函数在 3 个类之间变化。为什么不工作？答案

【问题标题】：Jquery click function change between 3 classes. Why not working?Jquery click 函数在 3 个类之间变化。为什么不工作？
【发布时间】：2015-10-07 08:43:04
【问题描述】：

我在 javascript (w jquery) 中有一个代码，其中单击时的图标应该在 3 个图标之间从音量增大到减小到关闭再到关闭，我正在思考和研究这个问题，但我没有尝试工作出来似乎工作请帮忙。（代码在 $(document).ready 中）。

var sound = 0;
  $('.sound').click(function(){
    var sound = sound + 1;
    if(sound == 1) {
      $('.sound').removeClass('glyphicon-volume-up');
      $('.sound').addClass('glyphicon-volume-down');
    } else if (sound == 2) {
      $('.sound').removeClass('glyphicon-volume-down');
      $('.sound').addClass('glyphicon-volume-off');
    } else if (sound == 3) {
      $('.sound').removeClass('glyphicon-volume-off');
      $('.sound').addClass('glyphicon-volume-up');
      var sound = 0;
    }
  });

【问题讨论】：

标签： javascript jquery html icons

【解决方案1】：

你可以使用数组做一些简单的事情

var sound = 0,
  cla = ['glyphicon-volume-up', 'glyphicon-volume-down', 'glyphicon-volume-off'];
$('.sound').click(function() {
  $(this).removeClass(cla[sound % 3])
    .addClass(cla[++sound % 3]);
  sound = sound % 3;
});

.glyphicon-volume-up {
  color: red;
}
.glyphicon-volume-down {
  color: green;
}
.glyphicon-volume-off {
  color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="sound glyphicon-volume-up">Button</div>

【讨论】：

这引发了一个错误（错误适用于“0，类”）下面有人向我发送了一段有效的代码，但感谢您的尝试。

【解决方案2】：

只需删除var sound

var sound = 0;
  $('.sound').click(function(){
    sound++;
    if(sound == 1) {
      $('.sound').removeClass('glyphicon-volume-up');
      $('.sound').addClass('glyphicon-volume-down');
    } else if (sound == 2) {
      $('.sound').removeClass('glyphicon-volume-down');
      $('.sound').addClass('glyphicon-volume-off');
    } else if (sound == 3) {
      $('.sound').removeClass('glyphicon-volume-off');
      $('.sound').addClass('glyphicon-volume-up');
      var sound = 0;
    }
  });

【讨论】：

【解决方案3】：

将var sound = sound + 1; 更改为sound = (sound) % 3 + 1

【讨论】：

【解决方案4】：

从函数开始和last else if中删除var。它已经在 click 函数上方定义，否则您的代码工作正常。

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type='text/javascript'>
    jQuery(document).ready(function($) {
        var sound = 0;
        $('.sound').click(function(){
            sound = sound + 1;  // sound variable is already defined so no need to define again.
            if(sound == 1) {
              $('.sound').removeClass('glyphicon-volume-up');
              $('.sound').addClass('glyphicon-volume-down');
          } else if (sound == 2) {
              $('.sound').removeClass('glyphicon-volume-down');
              $('.sound').addClass('glyphicon-volume-off');
          } else if (sound == 3) {
              $('.sound').removeClass('glyphicon-volume-off');
              $('.sound').addClass('glyphicon-volume-up');
              sound = 0; // Same as above, no need to define
          }
      });
    });
</script>
</head>

<body>
    <button class="sound">Main1</button>
</body>
</html>

【讨论】：

【解决方案5】：

您可以使用hasClass 方法，而不是使用计数器：

$('.sound').click(function(){
    var $this = $(this);
    if($this.hasClass('glyphicon-volume-up')) {
        $this.removeClass('glyphicon-volume-up').addClass('glyphicon-volume-down');

    } else if ($this.hasClass('glyphicon-volume-down')) {
        $this.removeClass('glyphicon-volume-down').addClass('glyphicon-volume-off');

    } else if ($this.hasClass('glyphicon-volume-off')) {
        $this.removeClass('glyphicon-volume-off').addClass('glyphicon-volume-up');
    }
});

为了简化代码，还可以使用toggleClass方法：

        $this.toggleClass('glyphicon-volume-up glyphicon-volume-down');

它将删除现有的类并添加缺失的类。

【讨论】：

这非常有效，真的谢谢你：D，我还在学习编码，这甚至没有进入我的脑海：3
太好了，别忘了接受答案；）您也可以使用toggleClass 来简化代码，请参阅我的编辑