我可以根据切换状态在切换类中使用条件吗答案

【问题标题】：Can I use a condition inside a toggleClass based on the toggle status我可以根据切换状态在切换类中使用条件吗
【发布时间】：2018-12-25 01:05:01
【问题描述】：

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

当我第一次单击.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 中输入什么来知道切换是真还是假？

【问题讨论】：

可以分享一下相关的HTML吗？谢谢。

标签： javascript jquery class toggle

【解决方案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>

【讨论】：

速度很快，正是我想要的，谢谢
太好了 - 很高兴我能帮上忙 :)

【解决方案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");

             }

    });

});

【讨论】：