在 jQuery 上更改复选框状态的问题答案

【问题标题】：Trouble with changing checkbox states on jQuery在 jQuery 上更改复选框状态的问题
【发布时间】：2017-08-25 13:53:45
【问题描述】：

我正在开发一个游戏来测试控制代码的一些属性。基础游戏就是这个著名的魔术游戏：您有一些带有数字的卡片，然后选择所有出现您选择的数字的卡片。然后，“魔术师”可以使用您选择的卡片的二进制代码发现您的号码。一个很简单的版本如下：

卡 1（如果选中则表示位 xx1）

卡 2（位 x1x）

卡 3（位 1xx）

例如，如果您正在考虑数字 3，您将选择卡片 1 和 2，它们以二进制表示 (011)，即数字 3。

嗯，这个解释是为了让你了解上下文。我的游戏版本还有一层验证卡和号码。您可以找到实际代码 in this codepen。它充满了警报，可以为我提供有关变量的信息。如果你运行它，你会发现第一次执行没问题，但下一次尝试它开始变得疯狂。

我在使用 jQuery 选中/取消选中复选框时遇到了一些麻烦。我已经尝试了许多解决方案并阅读了文档和其他相关帖子，但似乎没有任何东西可以解决这个问题。我认为$lie var 的范围存在一些问题。当我点击按钮时，它应该是$lie = ''；在另一个函数$lie 之后得到一个新值。这是正确的，但是当我将 $lie 传递给此函数时，它会记住以前的值。

我在这里复制了与$lie var 一起使用或相关的函数的完整框架：

var $lie = '';
function check() {
    $lie = ''; // only to clear on successive calls
    if (something) {
        // $lie gets its correct value here
    }
    return $lie; //I have made some alerts here and it is working well always
}

function lying() {
    if ($lie === something) {
         // something related with "something"
    }
}

function message($lie) {
    // other stuff
    $(some-div).on('click', function() {
        // more stuff
        $change = $('#' + $lie); // here $lie gets the first value, but not reset on successive tries, that is why program goes crazy
        $change.prop('checked', function(i, i2) {
            return !i2;
        });
    });
}

$(run-button).on('click', function(e) {
    e.preventDefault();
    check();
    if ($lie !== '') { // do only if $lie have value
        lying();
        message($lie)
    }
}

我第一次执行程序$lie 有一个正确的值并且可以正常工作。但接下来运行$lie 值不会重置并记住以前的值。我不确定错误在哪里，我尝试在很多地方重置$lie = '';，但一直在处理message($lie); 函数的第一个值。

感谢您的帮助和建议，如果答案在其他帖子中而我没有看到，请见谅！

【问题讨论】：

每次调用message() 函数时，都会将一个额外的点击处理程序绑定到some-div
感谢@billyonecan！那么，如何防止在 message() 函数上单击处理程序？我明白你在说什么。更重要的是，我重新设计了整个程序，因为我之前在嵌套的“点击”处理程序上遇到了问题。但正如你所指出的，它并没有解决。
如果你绑定的太多，你可以通过在绑定 .off('click').on('click') 或更好的 using a delegated event 之前在消息函数之外取消绑定来确保绑定一次。
@estemon 您不需要 some-div 点击处理程序的函数包装器，只需在 run-button 的点击处理程序中直接触发它：$(some-div).trigger('click');（您不需要供应$lie，因为它是在全局范围内定义的）
@Johannes 我已经尝试了您的建议，.off('click') 并且有效。但是，我将了解委托事件以改进它。非常感谢！

标签： javascript jquery checkbox scope

【解决方案1】：

由于我的评论似乎有助于回答手头的问题，因此这里将其作为扩展答案。

在 JQuery 中有几种处理事件绑定的方法。

$(some-div).on('click', function() {}); 上面的代码就是你正在使用的代码，这意味着每次你调用这段代码时，它都会选择页面上存在的每一个与选择器匹配的元素。

在您的代码中，由于这是在函数内部，因此您很有可能最终会重新绑定已绑定的事件。这会导致重复事件，真的会造成混乱。

您可以通过稍微修改代码来缓解这种情况：

$(some-div).off('click').on('click', function() {});

此代码确保在添加任何点击事件之前删除所有点击事件，从而停止重复事件。

但是，如果您的目标只是确保始终绑定有效元素，无论它们在初始页面加载时是否存在，那么委托事件是您的朋友。好消息是，这并没有太大的不同或很难做到。

只需像这样编写你的代码有点不同：

$('.parent').on('click', '.child', function() {});

在这种情况下，.parent 是一个选择器，它包含您所有事件的位置（在您的情况下，我相信是您的.container。在这种情况下，.child 将等同于您的some-div 选择器。

使用这种事件绑定，您无需担心取消绑定和重新绑定或重复事件，因为它会根据页面上的内容自动为您管理。

【讨论】：