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