JavaScript的 - 在调用2个功能

jQuery的$（窗口）事件的问题，我有这个代码的问题：JavaScript的 - 在调用2个功能

$(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()。

来源

2015-10-13 aksameet

请解释你期望这段代码做什么。请注意，“滚动”事件在滚动时会一秒钟激发多次 – charlietfl

虽然这似乎有点城市神话。只有使用平滑滚动或拖动滚动条本身的浏览器才会触发大量滚动事件。正常的“即时”鼠标滚轮像大多数浏览器一样只会触发单个事件。 – Shikkediel

@Shikkediel几乎不是神话http://jsfiddle.net/vohbo0h6/ – charlietfl

我不是什么你要实现的目标，但也许试试这个上手十分清楚：

目前你有

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

这是目前嵌套在

$(document).ready(function(){ 

});

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

看看这个JSFiddle的一些工作示例应该让你沿着正确的路线。

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

来源

2015-10-14 01:16:09 oceanexplorer

不，这也不起作用。但是你可能在这里正确的轨道，因为如果我把这两个函数调用到$（window）.load事件中 - 两者都不起作用。 – aksameet

当你说它不工作，状态框键或按钮点击被解雇？在那里提醒一下，看看他们是否做到了。你能编辑你的答案来添加你的html吗？ – oceanexplorer

@aksameet请参阅JSFiddle的更新答案，它演示了一些您正在尝试实现的内容，所有事件都按照预期正确接线并触发。 https://jsfiddle.net/oceanexplorer/b68fu4j7/1/ – oceanexplorer

JavaScript的 - 在调用2个功能

回答

相关问题