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個功能

回答

相關問題