JavaScript - 调用 2 个函数时出现 jQuery $(window) 事件问题

Question

我对这段代码有疑问:

$(document).ready(function(){

    var NavY = $('.header-top').offset().top;

    var stickyNav = function(){        <----------- 1)
        var ScrollY = $(window).scrollTop();

        if (ScrollY > NavY) { 
            $('.header').addClass('stick');
            $('.main-left-arrow').addClass('main-left-arrow-disable');
        } else {
            $('.header').removeClass('stick'); 
            $('.main-left-arrow').removeClass('main-left-arrow-disable');
        }
    };

    $(window).scroll(function() {      <---------- 1)
        stickyNav();
    });
    stickyNav();


    var posts = function() {        <------------- 2)
      $('.btn').click(function() {
        var post = $('.status-box').val();
        $('<li>').text(post).prependTo('.posts');
        $('.status-box').val('');
        $('.counter').text('140');
        $('.btn').addClass('disabled'); 
      });

      $('.status-box').keyup(function() {
        var postLength = $(this).val().length;
        var charactersLeft = 140 - postLength;
        $('.counter').text(charactersLeft);

        if(charactersLeft < 0) {
          $('.btn').addClass('disabled'); 
        }
        else if(charactersLeft == 140) {
          $('.btn').addClass('disabled');
        }
        else {
          $('.btn').removeClass('disabled');
        }
      });

      $('.btn').addClass('disabled');
    }

    $(window).load(function() {     <--------------- 2)
        posts();
    });
    posts();

});

我不知道如何调用 posts(); 函数。我知道 $(window).load 可能有问题，但我不知道是什么。第一个函数 - stickyNav(); 工作正常。如果我这样写:

$(window).scroll(function() {
    stickyNav();
    posts();
});
stickyNav();
posts();

...它们都会起作用，但这也会使 post(); 函数依赖于我无法拥有的滚动。

所以第二个功能根本不起作用。我不明白为什么。我正在尝试结合两个功能:

第一:

$(document).ready(function(){

    var NavY = $('.header-top').offset().top;

    var stickyNav = function(){
        var ScrollY = $(window).scrollTop();

        if (ScrollY > NavY) { 
            $('.header').addClass('stick');
            $('.main-left-arrow').addClass('main-left-arrow-disable');
        } else {
            $('.header').removeClass('stick'); 
            $('.main-left-arrow').removeClass('main-left-arrow-disable');
        }
    };

    $(window).scroll(function() {
        stickyNav();
    });
    stickyNav();
});

第二:

var posts = function() {
  $('.btn').click(function() {
    var post = $('.status-box').val();
    $('<li>').text(post).prependTo('.posts');
    $('.status-box').val('');
    $('.counter').text('140');
    $('.btn').addClass('disabled'); 
  });

  $('.status-box').keyup(function() {
    var postLength = $(this).val().length;
    var charactersLeft = 140 - postLength;
    $('.counter').text(charactersLeft);

    if(charactersLeft < 0) {
      $('.btn').addClass('disabled'); 
    }
    else if(charactersLeft == 140) {
      $('.btn').addClass('disabled');
    }
    else {
      $('.btn').removeClass('disabled');
    }
  });

  $('.btn').addClass('disabled');
}

$(document).ready(posts);

它们在单独的文件中都工作得很好。我只是希望它们在一个 js 文件中工作。并且 post() 可以在按下按钮时触发。

Answer 1

我不太清楚您想要实现什么目标，但也许可以尝试这样做:

现在你已经

$(window).load(function() {
    posts();
});

当前嵌套在

$(document).ready(function(){

});

我的猜测是 $(window).load 已经在 $(document).ready 之前触发，因此永远不会被调用。

看看这个 JSFiddle 中的一些工作示例，它们应该可以帮助您走上正确的道路。

https://jsfiddle.net/oceanexplorer/b68fu4j7/1/