JavaScript封装复选框切换显示隐藏逻辑后功能异常如何解决

你遇到的问题不是语法错误，是 JavaScript 函数调用时的 this 指向逻辑导致的。

根因说明 #

你在事件回调的匿名函数里直接调用 toggle() 时，toggle 函数内部的 this 默认指向全局 window 对象，并非触发 change 事件的复选框元素，因此 $(this).is(":checked") 的判断结果永远不符合预期，才会出现勾选后无法触发显示的问题。

可行解决方案 #

方案1：将目标元素作为参数传入函数 #

最直观易维护的写法，适合需要复用逻辑的场景：

$('#some-id').change(function(){
    // 把当前触发事件的复选框DOM元素作为参数传入
    toggle(this);
});

function toggle(el) {
    $(el).is(":checked") ? show() : hide();
}

方案2：直接绑定函数作为事件回调 #

写法最简洁，复用性最高，新增同类复选框绑定时直接复用 toggle 函数即可：

// 直接传入toggle函数引用作为事件回调，触发时this会自动指向当前复选框元素
$('#some-id').change(toggle);
$('#other-checkbox-id').change(toggle); // 其他同类复选框可直接复用

function toggle() {
    $(this).is(":checked") ? show() : hide();
}

方案3：手动绑定this指向 #

如果需要保留外层匿名函数的逻辑，可以用call手动绑定toggle的this指向：

$('#some-id').change(function(){
    // 手动将toggle的this绑定为当前触发事件的元素
    toggle.call(this);
});

function toggle() {
    $(this).is(":checked") ? show() : hide();
}

内容的提问来源于stack exchange，提问作者cavalcantelucas