javascript - 3 个类之间的 Jquery 单击函数更改。为什么不工作？

Question

我在 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;
    }
  });

Answer 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>