Question

我试图找出，如何在第一次单击一个名为active_img的类后添加到一个元素，然后在第二次单击时删除第一个类并添加一个名为reverse_img的类，这就像放置在循环中一样。因此，在每次奇怪的点击时，元素将获得类active_img，并且在每次偶数点击时，元素将获得类reverse_img。这就是我在jquery中所拥有的，但它不起作用，如果我在那里添加第二类。

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

HTML

.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);
  }
}

和scss

{{1}}

答案：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()

这将在每次其他点击时打开和关闭班级

H2OContext.getOrCreate

jquery第一次单击，第二次单击，第一次单击，第二次单击

3 个答案: