小编典典

jQuery单击/在两个功能之间切换

javascript

我正在寻找一种方法,当单击某些内容时,可以运行两个单独的操作/函数/“代码块”,然后在再次单击同一内容时,运行一个完全不同的块。我把这个放在一起。我想知道是否有更有效/更优雅的方法。我知道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);
    }
});

阅读 281

收藏
2020-04-25

共1个答案

小编典典

jQuery有两个称为的方法.toggle()。在另一个 [文件]
不正是你想要的click事件。

注意: 似乎至少从 jQuery 1.7开始 ,此版本.toggle弃用
,可能正是出于这个原因,即存在两个版本。利用.toggle改变元素的知名度仅仅是一个更常见的用法。该方法已 在jQuery 1.9
删除

下面是一个示例,说明了如何实现与插件相同的功能(但可能会暴露与内置版本相同的问题(请参阅文档的最后一段))。


(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上找到它

2020-04-25