jQuery复选框取消选中if语句

Question

我不太清楚为什么我的代码在这里不起作用。

我有一个if语句，用于检查是否已选中1个或多个复选框，如果它为true，则运行一个函数。 当页面滚动到特定高度时，该功能允许栏向下滑动。

当我刷新后第一次访问该站点时，它可以工作。 即，该条不可见，当我滚动时，然后当我选中一个框时，它变为可见。

但是，当我取消选中该框时，该栏仍然可见！

取消选中复选框时，如何隐藏它？

我以为else语句中的一行如下所示会起作用，但它们却行不通（如果出现以下情况，我甚至试图添加else if ：

$(".userbar").hide(); //OR
$(".userbar").slideUp(); //OR
$(".userbar").off();

这是我的代码：

$(document).on('change', '#est', function (e){
    // Get number of checkboxes checked.
    var counter = $('input[type="checkbox"]:checked').length;
    console.log("Checkboxs checked number: " + counter);
    e.preventDefault();
    if (counter >= 1 ) {
      $(window).scroll(function() {
          if ($(this).scrollTop() < 370)
          {
              $(".userbar").slideUp(100);
          }
          else
          {
              $(".userbar").slideDown(100);
          }
      });
    } else if (counter == 0 ){
            $(".userbar").hide();
          }
});

Answer 1

第一次counter >= 1 ，您将一个函数绑定到window "scroll"事件，该函数将决定该条是否可见。 即使后面的counter值为零，并且您运行.hide() ，您之前注册的scroll处理程序仍将在那里并再次运行。

解决此问题的一种简单方法是添加类似

else if (counter == 0 ){
    $(window).off("scroll");
    $(".userbar").hide();
}

请注意， .off("scroll")将删除“ scroll”事件的所有处理程序。 如果您有其他人并且想要保留他们，则可能要命名处理程序并将其单独删除，例如：

function myScrollHandler() {
    if ($(this).scrollTop() < 370)
    {
        $(".userbar").slideUp(100);
    }
    else
    {
        $(".userbar").slideDown(100);
    }
}
// ...
$(window).scroll(myScrollHandler);
// ...
$(window).off("scroll", myScrollHandler);