Jquery点击函数在3个类之间切换，为什么没有起作用？

Question

Jquery点击函数在3个类之间切换，为什么没有起作用？

3

我有一个用JavaScript编写的代码（使用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;
    }
  });

- Adam Migacz

5个回答

0

Remove var from starting of function and from last else if. It is already defined above click function else your code working fine.

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

- Sarjan Desai

0

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

- Lucman Abdulrachman

0

不必使用计数器，你可以使用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');

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

- Finrod

这个完美地运行了，真的谢谢你 :D，我还在学习编程，这甚至没有进入我的脑海中 :3 - Adam Migacz

太好了，别忘了接受一个答案 ;)你还可以使用 toggleClass 来简化代码，看看我的编辑 - Finrod

0

只需删除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;
    }
  });

- Joseph Khella

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Pranav C Balan · Accepted Answer

你可以使用数组来完成类似这样简单的操作。

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>