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);

jQuery复选框取消选中if语句

1 个答案: