我对这段代码有疑问:
$(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()
可以在按下按钮时触发。
最佳答案
我不太清楚您想要实现什么目标,但也许可以尝试这样做:
现在你已经
$(window).load(function() {
posts();
});
当前嵌套在
$(document).ready(function(){
});
我的猜测是 $(window).load 已经在 $(document).ready 之前触发,因此永远不会被调用。
看看这个 JSFiddle 中的一些工作示例,它们应该可以帮助您走上正确的道路。
关于JavaScript - 调用 2 个函数时出现 jQuery $(window) 事件问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33114388/