我正在寻找一种方法,当单击某些内容时,可以运行两个单独的操作/函数/“代码块”,然后在再次单击同一内容时,运行一个完全不同的块。我把这个放在一起。我想知道是否有更有效/更优雅的方法。我知道jQuery.toggle(),但是有点烂。
var count = 0; $("#time").click(function() { count++; //even odd click detect var isEven = function(someNumber) { return (someNumber % 2 === 0) ? true : false; }; // on odd clicks do this if (isEven(count) === false) { $(this).animate({ width: "260px" }, 1500); } // on even clicks do this else if (isEven(count) === true) { $(this).animate({ width: "30px" }, 1500); } });
jQuery有两个称为的方法.toggle()。在另一个 [文件] 不正是你想要的click事件。
.toggle()
注意: 似乎至少从 jQuery 1.7开始 ,此版本.toggle已 弃用 ,可能正是出于这个原因,即存在两个版本。利用.toggle改变元素的知名度仅仅是一个更常见的用法。该方法已 在jQuery 1.9 中 删除 。
.toggle
下面是一个示例,说明了如何实现与插件相同的功能(但可能会暴露与内置版本相同的问题(请参阅文档的最后一段))。
(function($) { $.fn.clickToggle = function(func1, func2) { var funcs = [func1, func2]; this.data('toggleclicked', 0); this.click(function() { var data = $(this).data(); var tc = data.toggleclicked; $.proxy(funcs[tc], this)(); data.toggleclicked = (tc + 1) % 2; }); return this; }; }(jQuery));
演示
(免责声明:我不是说这是最好的实现!我敢打赌,可以在性能方面进行改进)
然后调用:
$('#test').clickToggle(function() { $(this).animate({ width: "260px" }, 1500); }, function() { $(this).animate({ width: "30px" }, 1500); });
更新2:
同时,我为此创建了一个合适的插件。它接受任意数量的功能,并可用于任何事件。可以在GitHub上找到它。