jQuery第1次点击，第2次点击，第1次点击，第2次点击

Question

我试图弄清楚，如何在第一次单击后将一个称为active_img的类添加到元素，然后在第二次单击时删除第一类并添加一个名为reverse_img的类，这就像放置在循环中一样。 因此，在每次奇数单击时，元素将获得类active_img，而在每偶数单击时，元素将获得类reverse_img。 这就是我在jquery中拥有的东西，但是如果我在那儿添加第二类的话，那是行不通的。

  $('.menu').click(function() {
    if ($('.menu_img').hasClass('active_img')) {
      $('.menu_img').removeClass('active_img');
    } else {
        $('.menu_img').addClass('active_img');
    }
});

html

<div class="menu"><img src="menu.svg" class="menu_img" /></div>

和scss

.menu {
  @include width-height(260px, 220px);
  background-color: transparent;
  border-radius: 50%;
  margin: -150px 0 0 -170px;
  transition: .3s;
  float: left;

    .menu_img {
      width: 60px;
      position: absolute;
      top: 8px;
      left: 15px;
      margin: 0;
      transition: .3s;
      transform: rotateZ(0deg);
    }
    .active_img {
      animation-name: img;
      animation-duration: .5s;
      -webkit-animation-name: img;
      -webkit-animation-duration: .5s;
    }
   .reverse_img {
     animation-name: reverse_img;
     animation-duration: .5s;
     -webkit-animation-name: reverse_img;
     -webkit-animation-duration: .5s;
   }
 }
.menu:hover {
  background-color: white;
  margin: -110px 0 0 -130px;
  cursor: pointer;
  transition: .3s;
  .menu_img {
    top: 3px;
    left: 10px;
    width: 70px;
    transition: .3s;
  }
}

@keyframes img {
  0% {}
  100% {
    transform: rotateZ(180deg);
  }
}
@keyframes reverse_img {
  0% {}
  100% {
    transform: rotateZ(-180deg);
  }
}

谢谢答案：D

Answer 1

$('.menu').click(function() {
    var menuImage = $('.menu_img'),
        newClass = menuImage.hasClass('active_img') ? 'reverse_img' : 'active_img';

        menuImage.removeClass('active_img reverse_img');
        menuImage.addClass(newClass);
    }
});

认为应该起作用。 要么...

$('.menu').click(function() {
    var menuImage = $('.menu_img');
        menuImage.toggleClass('active_img');
        menuImage.toggleClass('reverse_img');
    }
});

如果页面始终始终以适当的类加载。

Answer 2

首先将reverse_img类添加到HTML并使用以下脚本：

$('.menu').click(function() {
($('.menu_img').toggleClass('active_img'));
($('.menu_img').toggleClass('reverse_img'));

}）;

Answer 3

您可以查看toggleClass（）

这将在每隔一次单击时打开和关闭该类

$('.menu').click(function() {
    $('.menu_img').toggleClass('active_img');
});