我有几个正常工作的 jQuery 函数 - 绑定(bind)到页面滚动的固定 Logo 和导航菜单的淡入,以及绑定(bind)到 (document).ready 的 Firefox 的灯箱和滚动条修复。
我正在尝试添加隐藏和/或显示几个与点击相关的 div 的功能。
作为一个独立的功能,我让它像 fiddle 一样正常工作......
问题是我正在学习 jQuery,我不确定在页面底部的脚本中调用函数的正确顺序是什么。
我的逻辑告诉我将它包含在 (document).ready 部分下,但是当我从 fiddle 中插入工作脚本时,它不仅不起作用而且还搞砸了我的其余功能。
没有隐藏/显示功能的当前工作脚本(根据评论更新):
<script>
$(window).scroll(function() {
if ($(this).scrollTop() > 200) {
$(".main-links").fadeIn();
$(".header-logo").fadeIn();
} else {
$(".main-links").hide();
$(".header-logo").hide();
}
});
$(document).ready(function(){
$('.lightbox').nivoLightbox();
$('.scroll-pane').jScrollPane();
$('.scroll-pane2').jScrollPane();
});
</script>
我尝试插入附加功能的方式是这样的:
<script>
$(window).scroll(function() {
if ($(this).scrollTop() > 200) {
$(".main-links").fadeIn();
$(".header-logo").fadeIn();
} else {
$(".main-links").hide();
$(".header-logo").hide();
}
});
$(document).ready(function(){
$('.lightbox').nivoLightbox();
$('.scroll-pane').jScrollPane();
$('.scroll-pane2').jScrollPane();
$('#menu-switch1').on('click', function(event) {
$('#main-tasting-menu').toggle('show');
$('#dessert-tasting-menu').toggle('hide');
});
$('#menu-switch2').on('click', function(event) {
$('#main-tasting-menu').toggle('hide');
$('#dessert-tasting-menu').toggle('show');
});
</script>
当我执行此操作时,切换功能无法像在我的 fiddle 中那样工作,它杀死了我的 scroll-pane2 并添加了一个不应出现在 .scroll-pane1 上的水平滚动条。
是否因为我对 jQuery 的了解不足而忽略了一些明显的东西?
HTML 部分(脚本 list ?):
<script src="js/nivo-lightbox.min.js"></script>
<link href="css/nivo-lightbox.css" rel="stylesheet" type="text/css" media="screen">
<link href="themes/default/default.css" rel="stylesheet" type="text/css" media="screen">
<!-- jScrollPane CSS for Firefox scrollbar fix (applied to all browsers) -->
<link href="css/jquery.jscrollpane.css" rel="stylesheet" type="text/css" media="screen">
<!-- Mousewheel support for jScrollPane scrollbar fix for FireFox and IE -->
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<!-- the jScrollPane script -->
<script type="text/javascript" src="js/jquery.jscrollpane.min.js"></script>
最佳答案
首先,当您为 #menu-switch
添加点击处理程序时,您的示例中存在语法错误。您需要关闭函数和对 live 的调用,如下所示。注意额外的 })
关闭对 live()
的每次调用。
$(document).ready(function(){
$('.lightbox').nivoLightbox();
$('.scroll-pane').jScrollPane();
$('.scroll-pane2').jScrollPane();
$('#menu-switch1').live('click', function(event) {
$('#main-tasting-menu').toggle('show');
$('#dessert-tasting-menu').toggle('hide');
});
$('#menu-switch2').live('click', function(event) {
$('#main-tasting-menu').toggle('hide');
$('#dessert-tasting-menu').toggle('show');
});
});
还有一些您可能需要考虑的事项。您需要将所有内容包装在 $(document).ready()
调用中,因为这将确保 jQuery 和 DOM 已准备好执行操作。正如 charlietfl 在上面的评论中提到的,live()
方法 was deprecated in version 1.7 .如果您使用的版本 > 1.7,那么您需要使用 on()
代替。这是整个事情的更新版本。
$(document).ready(function(){
// Cache the items you need to use inside different functions.
// This is so that you don't have to call the jQuery method
// on every user action.
var $mainLinks = $('.main-links');
var $headerLogo = $('.header-logo');
var $mainTastingMenu = $('#main-tasting-menu');
var $dessertTastingMenu = $('#dessertTastingMenu');
var $menuSwitch_1 = $('#menu-switch1');
var $menuSwitch_2 = $('#menu-switch2');
// Setup your plugins
$('.lightbox').nivoLightbox();
$('.scroll-pane').jScrollPane();
$('.scroll-pane2').jScrollPane();
// Setup your event handlers
$menuSwitch_1.on('click', function(event) {
$mainTastingMenu.toggle('show');
$dessertTastingMenu.toggle('hide');
});
$menuSwitch_2.on('click', function(event) {
$mainTastingMenu.toggle('hide');
$dessertTastingMenu.toggle('show');
});
// I made this handler match the ones above for consistency
$(window).on('scroll', function(event) {
if ($(this).scrollTop() > 200) {
$mainLinks.fadeIn();
$headerLogo.fadeIn();
} else {
$mainLinks.hide();
$headerLogo.hide();
}
});
});
关于javascript - jQuery 脚本的正确顺序?隐藏/显示功能在实时版本中不起作用,但可以作为独立的 fiddle 使用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25817389/