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/

JavaScript - jQuery $（窗口）事件在调用2个函数

1 个答案: