JavaScript-调用2个函数时发出jQuery$(窗口)事件
我对此代码有问题:JavaScript-调用2个函数时发出jQuery$(窗口)事件,javascript,jquery,Javascript,Jquery,我对此代码有问题: $(document).ready(function(){ var NavY = $('.header-top').offset().top; var stickyNav = function(){ <----------- 1) var ScrollY = $(window).scrollTop(); if (ScrollY > NavY) { $('.header')
$(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();
});
…它们都能工作,但这也会使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);
var posts=function(){
$('.btn')。单击(函数(){
var post=$('.status box').val();
$(“”).text(post.prependTo(“.posts”);
$('.status box').val('');
$('.counter').text('140');
$('.btn').addClass('disabled');
});
$('.status box').keyup(函数(){
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');
}
否则{
$('.btn').removeClass('disabled');
}
});
$('.btn').addClass('disabled');
}
美元(文件)。准备就绪(员额);
它们在单独的文件中都可以正常工作。我只想让它们在一个js文件中工作。按下按钮可以启动post()
。我不太清楚您想要实现什么,但也许可以尝试以下方法开始:
现在你有
$(window).load(function() {
posts();
});
当前嵌套在
$(document).ready(function(){
});
我猜$(window).load已经在$(document).ready之前启动,因此永远不会被调用
请看一下这个JSFIDLE,以获得一些工作示例,这些示例将帮助您了解正确的方向
请解释您希望此代码做什么。请注意,scroll
事件在滚动时每秒触发多次,但这似乎有点像城市神话。只有使用smoothscroll或拖动滚动条本身的浏览器才会触发大量滚动事件。像大多数浏览器一样,正常的“瞬时”鼠标滚轮滚动只会触发一个事件。@Shikkediel这绝非神话我自己也在Windows7机器上,小提琴在那里的影响很小。当然,使用标志或各种开关总是一个好主意。为了简单的正确性,它是否触发了5倍或500倍的次数并不重要…@aksameet您何时尝试触发posts事件?你想让它在按下按钮时开火吗?不,这也不行。但是您可能在这里走对了,因为如果我将两个函数调用都放在$(窗口).load事件中,这两个函数都不起作用。当您说它不起作用时,状态框是否向上键或按钮单击是否被触发?在那里放一个警报,看看他们有没有。你能编辑你的答案来添加你的html吗?@aksameet请用一个JSFIDLE查看更新的答案,它演示了你正在尝试实现的一些功能,所有事件都正确连接并按你的预期触发。
$(document).ready(function(){
});