Question

我正在使用一个带有'grid'类的按钮，它可以在3个类之间切换，当页面加载时它总是以'16pads'类开头，然后点击它时应删除类'16pads'并替换为'36pads'然后如果再次点击按钮并且hasClass'36pads'它应该删除类'36pads'并用'64pads'替换它。最后，如果按钮具有类'64pads'并且单击它，它应该删除类'64pads'并将其替换为'16pads'，它基本上在单击按钮时循环遍历3个类。

出于某种原因，点击它似乎循环整个序列而不是一次一个。

我做错了什么？

JQuery的

$('.grid').on('click',function() {     
  if ($(this).hasClass('16pads'));
  {
    $(this).removeClass('16pads');
    $(this).addClass('36pads'); 
  }

  if ($(this).hasClass('36pads'));
  {
    $(this).removeClass('36pads');
    $(this).addClass('64pads');
  }

  if ($(this).hasClass('64pads'));
  {
    $(this).removeClass('64pads');
    $(this).addClass('16pads'); 
  }  
});

Answer 1

想象一下方法执行的流程：

它有16pads吗？是。
将16pads替换为36pads。
现在，它有36pads吗？是。
将36pads替换为64pads等。

将if替换为else if：

$('.grid').on('click',function() {     
  if ($(this).hasClass('16pads'))
  {
    $(this).removeClass('16pads');
    $(this).addClass('36pads'); 
  }
  else
  if ($(this).hasClass('36pads'))
  {
    $(this).removeClass('36pads');
    $(this).addClass('64pads');
  }
  else
  if ($(this).hasClass('64pads'))
  {
    $(this).removeClass('64pads');
    $(this).addClass('16pads'); 
  }
});

现在，它只更改了一次类并离开了这个方法。

Answer 2

你需要添加其他，

我认为类名不是很好的使用数字开头像16pads：）

＆＃13;

$('.grid').on('click',function() {     
  if ($(this).hasClass('t_16pads'))
  {
    $(this).removeClass('t_16pads');
    $(this).addClass('t_36pads'); 
  }

  else if ($(this).hasClass('t_36pads'))
  {
    $(this).removeClass('t_36pads');
    $(this).addClass('t_64pads');
  }

  else if ($(this).hasClass('t_64pads'))
  {
    $(this).removeClass('t_64pads');
    $(this).addClass('t_16pads'); 
  }  
});

＆＃13;

.t_16pads{
  font-size:16px;
 }
 
.t_36pads{
  font-size:36px;
 }
 
.t_64pads{
  font-size:64px;
 }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="grid t_16pads">CLICK HERE</div>

＆＃13;

Jquery .on（'click'，function（）根据当前类在3个类之间切换

2 个答案: