Question

我正在创建一个切换，需要根据切换状态执行命令。

当我第一次单击.flip1时，它将flipped类添加到.card1中。我还希望它显示“已添加翻转”警报

当我再次单击它时，它会删除flipped类，并且我希望它显示一个“已翻转已删除”警报。

我认为代码看起来像这样：

$(document).ready(function () {

    $('.flip1').click(function () {

        $('.card1').toggleClass('flipped');

          if ("class added"){
            alert("flipped added");
          }
          if ("class removed"){
            alert("flipped removed");  
          }
        });
});

我可以在if中放些东西来了解切换是对还是错？

Answer 1

可以通过jQuery's hasClass() method来实现，就像这样：

$(document).ready(function() {
  $('.flip1').click(function() {

      $('.card1').toggleClass('flipped');

      // use hasClass to see if .card1 has .flipped class now applied.
      // if true, that indicates it was just added
      if ($('.card1').hasClass('flipped')) {
        alert("flipped added");
      } else {
        alert("flipped removed");
      }
    }
  );
});

.flipped {
background:yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>

<div class="card1">
Card1 (yellow if flipped)
</div>

<a href="#" class="flip1">
Flip1
</a>

Answer 2

您可以使用addClass()和.removeClass()来更改类别，并使用.hasClass()来检查状态。

这是您的代码：

$(document).ready(function () {
    $('.flip1').on('click', function () {
            if ( $('.card1').hasClass('flipped') ) {
               $('.card1').removeClass('flipped');

               alert("flipped removed"); 

            } else {
               $('.card1').addClass('flipped');

               alert("flipped added");

             }

    });

}）;

我可以根据切换状态在toggleClass内使用条件吗

2 个答案: