jq2 里没有toggle方法了，有什么好的替代吗

Question

jq2 里没有toggle方法了，有什么好的替代吗，还有事件解绑用哪个

Answer 1

用hasClass/addClass/removeClass或attr标记状态实现toggle切换

<button id="animate" status="0">animate</button>
<div id="block">Hello World</div>

$("#animate").click(function(){
    if(!$(this).hasClass("clicked")) {
        $(this).addClass("clicked");
        $("#block").animate({"font-size": "10em"}, 1000, "linear", function(){console.log("complete");});
    } else {
        $(this).removeClass("clicked");
        $("#block").animate({"font-size": "1em"}, 1000, "linear", function(){console.log("complete");});
    }
});

$("#animate").click(function(){
    if($(this).attr("status") == 0) {
        $(this).attr("status", 1);
        $("#block").animate({"font-size": "10em"}, 1000, "linear", function(){console.log("complete");});
    } else {
        $(this).attr("status", 0);
        $("#block").animate({"font-size": "1em"}, 1000, "linear", function(){console.log("complete");});
    }
});

Answer 2

官方没有说去掉 toggle() 和 toggleClass() 啊，只说了在 3.0 中不再使用 .toggleClass( [state ] ) 这个签名(仅这个签名) 的函数。

就 toggle() 来说，主要是用于显示或隐藏，可以自己判断，调用 show() 或者 hide() 的

var $node = ...;

if ($node.is(":hidden")) {
    $node.show();
} else {
    $node.hide();
}

Answer 3

那就直接使用hide和show这两个就行了或者你自己实现一个toggle（用hide和show）用JQ的extend，绑定在JQ上

Answer 4

官方要求用if。

Answer 5

题主说的应该是jq1.9里移除的这个toggle(fn1,fn2[,fn3,...])，我觉得可以借鉴上面答主的思路，设置个标志位，然后在click事件处理里用if...else判断下就可以了。

至于事件解绑，一种是用one()绑定，这样事件触发一次之后可以自动解绑；还有一种是绑定时为事件加上命名空间，比如

$('#btn').on('click.test',function(){
    //todo...
});

这样就可以直接用

$('#btn').off('.test');

来解绑了。