Question

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

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

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

Answer 1

toggleClass()没有回调，但您可以在调用toggleClass()后立即检查该元素是否具有该类，如下所示：

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

Working example

Answer 2

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

承诺将返回延迟对象;

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

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

Answer 3

您可以在切换后添加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 4

以下代码应该有效。您可以使用promise()方法，bind方式.done()。

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

jQuery toggleClass回调如何？

4 个答案: