javascript - 在页面加载时进行初始验证后验证 if 语句

Question

如果满足两个条件，我将使用 if 语句对元素执行 .load() 操作:

if (current_items <= {{total_hits}} && infinite_scroll != 'disabled') {
    $(window).scroll(function () {
        if ($(document).height() <= $(window).scrollTop() + $(window).height()) {
            var sort_by = $('#sort_by').val();

                if ($('input:checkbox:checked').val()) {
                    var category_filter = ""
                    $('input:checkbox:checked').each(function() {
                           category_filter += "\""+$(this).val()+"\","
                         });
                    category_filter = category_filter.substring(0, category_filter.length - 1);
                }else{
                    var category_filter = "all"
                }
            $.get('/search_ajax/{{query}}/'+sort_by+'/'+current_items+'/'+category_filter, function(data){
              $(data).appendTo("#container");
              current_items = $('[class="small-3 columns"]').length;
            });
        }
    });
  }

它在第一个条件下运行良好，但现在我想根据第二个条件(变量infinite_scroll)禁用/启用它。 该变量在加载时“启用”或“禁用”，然后工作正常。 问题是当我用另一个 jquery 调用更改值时，它不起作用。 我猜想 if 在加载时会检查一次，并且不会再次评估，这就是它不起作用的原因。 使用 jquery 调用后，该变量的值确实发生了变化。

关于如何查看问题所在或使用其他方法有什么想法吗？

谢谢， 艾萨克

Answer 1

是的，if 语句在页面加载后不会自动重新计算，但您可以通过将上述代码包含在函数中并在每次更改 infinite_scroll 变量，这是解决方案:

function changeSroll(current_items, infinite_scroll) {
  if (current_items <= {{total_hits}} && infinite_scroll != 'disabled') {
      $(window).scroll(function () {
          if ($(document).height() <= $(window).scrollTop() + $(window).height()) {
              var sort_by = $('#sort_by').val();

                  if ($('input:checkbox:checked').val()) {
                      var category_filter = ""
                      $('input:checkbox:checked').each(function() {
                             category_filter += "\""+$(this).val()+"\","
                           });
                      category_filter = category_filter.substring(0, category_filter.length - 1);
                  }else{
                      var category_filter = "all"
                  }
              $.get('/search_ajax/{{query}}/'+sort_by+'/'+current_items+'/'+category_filter, function(data){
                $(data).appendTo("#container");
                current_items = $('[class="small-3 columns"]').length;
              });
          }
      });
    }
}

现在，每次更改 infinite_scroll 变量时，请添加以下行:

changeSroll(current_items, infinite_scroll);

希望这能实现您想要做的事情。