過去自己常用jQuery.fn.toggle(fn1,fn2)來處理click事件的兩種狀態,例如click一次做一個動作,再click一次則回復原來的動作,只要把兩個動作處理的function handler指定給toggle當前、後兩個參數即可。
但是由於jQuery中,有兩個名稱一樣,但作用不同的toggle,一個就是前面描述的,另一個則是用來顯示/隱藏元素。在jQuery 1.8中,前面描述的功能已經列入不建議使用,而1.9更是移除掉,只保留用來顯示/隱藏元素的機制。
因此只要使用jQuery 1.9,有用上toggle(fn1,fn2)的都會失效。除非用上 jQuery Migrate plugin或者官方建議從原始碼找出原來的作法,抽出來獨立使用。
其實原本提供的toggle(fn1,fn2)直觀又好用,移除實在太可惜了,剛好在stackoverflow看到一段替代辦法,轉過來分享給大家。
$.fn.toggleClick = function(){
var functions = arguments ;
return this.click(function(){
var iteration = $(this).data('iteration') || 0;
functions[iteration].apply(this, arguments);
iteration = (iteration + 1) % functions.length ;
$(this).data('iteration', iteration);
});
};
上面的程式碼已經整理成jQuery plugin, 所以只要依一般jQuery的外掛使用方法即可。
程式碼的出處在此:http://stackoverflow.com/questions/14338078/equivalent-of-deprecated-jquery-toggle-event