javascript - 在 jQuery 上更改复选框状态时遇到问题

Question

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

卡片 1(如果选择则代表位 xx1)

• 1
• 3
• 5
• 7

卡 2(位 x1x)

• 2
• 3
• 6
• 7

卡片 3(位 1xx)

• 4
• 5
• 6
• 7

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

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

我在使用 jQuery 选中/取消选中复选框时遇到了一些麻烦。我尝试了很多解决方案并阅读了文档和其他相关帖子，但似乎没有任何方法可以解决这个问题。我认为 $lie 的范围存在一些问题变种。当我点击按钮时，它应该是 $lie = '' ;在另一个功能之后 $lie得到一个新的值。这是正确的，但是当我通过 $lie对于这个函数，它会记住以前的值。

我在这里复制了与 $lie 一起使用或与之相关的函数的完整框架。变量:

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); 的第一个值功能。

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

Answer 1

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

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

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

在您的代码中，因为这是一个函数内部，所以您很可能最终会重新绑定(bind)已经绑定(bind)的事件。这会导致重复事件并造成困惑。

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

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

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

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

像这样简单地编写一些不同的代码:

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

在这种情况下，.parent 是一个选择器，它包含您所有事件的位置(在您的情况下，我认为是您的 .container。.child 在这种情况下相当于您的 some-div 选择器。

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