jQuery toggleClass的回调怎么来的？

Question

我有这个简单的 jQuery 事件 toggleClass:

$(this).on("click", function() {
    $(this).toggleClass("fa-stop-circle");
});

如果添加 fa-stop-circle，我想调用一些方法。我如何监控此事件？

Answer 1

您可以在切换后添加 if 语句

$(this).on("click", function() {
   var that = $(this);
   that.toggleClass("fa-stop-circle");
   if (that.hasClass('fa-stop-circle')) {
     // Execute your method
   }
});

更新

您可以创建并使用一个函数，该函数在每次执行 toggleClass() 时触发自定义事件并侦听此事件以执行您的方法。

/**
*  Custom class for toggling classes
*  @param $elem {jQuery object}
*  @param classes {array}
*/
var customToggleClass = function($elem, classes) {
  if ($elem && $elem instanceof jQuery) {
    if (classes && classes.length > 0) {     
      if (classes.length == 1) {
        $elem.toggleClass(classes[0]);
        $(document).trigger('custom_toggleClass');
      } else if (classes.length == 2) {
        $elem.toggleClass(classes[0], classes[1]);
        $(document).trigger('custom_toggleClass');
      }      
    }
  }
}

$(document).on('click', '#test', function() {
  customToggleClass($('#test'), ['test_class_1', 'test_class_2']);
});

$(document).on('custom_toggleClass', function() {
  alert('Class changed!');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<span id="test">Click me</span>

Answer 2

toggleClass() 没有回调，但是你可以在调用 toggleClass() 后立即检查元素是否有 class，像这样：

$(this).on("click", function() {
    var $el = $(this).toggleClass("fa-stop-circle");
    if ($el.hasClass('fa-stop-circle')) {
        // do something...
    }
});

Working example

Answer 3

您应该结合使用 .done() 和 .promise()。

promise 将 return 延迟对象；

然后完成在解析延迟对象时添加处理程序。

$(this).toggleClass("fa-stop-circle").promise().done(function() {
    if ($this).hasClass("fa-stop-circle")) {
        // your code
    }
});

Answer 4

下面的代码应该可以工作。您可以使用 promise() 方法和 bind 它到 .done().

$(this).on("click", function() {
    $(this).toggleClass("fa-stop-circle").promise().done(function(){
         //call your method here
    });
});

jQuery toggleClass的回调怎么来的？

jQuery toggleClass callback how to?

jquery

class

callback

toggle