jQuery toggleClass回调如何？

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

您可以切换

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

更新后添加if声明

您可以创建并使用一个触发间隔时间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 3

您应该在组合中使用.done()离子与.promise()。

承诺将返回延期对象;

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

$(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 
    }); 
});