帮助将jquery函数组合到一个文件中

时间:2009-07-17 15:10:29

标签: jquery function

我正在尝试在单个js文件上组合几个函数。我对jquery很新,现在我已经将函数用于单独的文件,在不同的页面上调用(在drupal上工作),但字符串非常小,以至于最好将它们全部组合在一起script.js文件。

以下是功能:

$(document).ready(function() {
    switches = $('#na-paises-list > li');
    slides = $('#na-paises-images > div');
    switches.each(function(idx) {
            this.slide = slides[idx];
        }).click(function(){$(this).addClass('selected'); $(this.slide).unbind();}).hoverIntent(paisesOver,paisesOut);
});

function paisesOver(){ $(this).addClass('active'); $(this.slide).fadeIn(); }
function paisesOut(){ switches.removeClass('active'); slides.fadeOut('fast'); }

(这是我在堆栈溢出here上找到的并且稍微改了一下,也许这就是我犯了错误的地方......)

第二个:

$(document).ready(function() {
    $("#na-areas-actividade div").tabs({ fx: { opacity: 'toggle', duration: 'fast' }, cookie: { expires: 30 } });
});

第三个:

$(document).ready(function() {
    $("#agencias div").tabs({ fx: { opacity: 'toggle', duration: 'fast' }, cookie: { expires: 30 } });
});

每当我尝试将第二个或第三个函数与第一个函数组合时出现问题并且只有其中一个有效。我将这些函数放在文档就绪函数中,如下所示:

$(document).ready(function() {
    switches = $('#na-paises-list > li');
    slides = $('#na-paises-images > div');
    switches.each(function(idx) {
            this.slide = slides[idx];
        }).click(function(){$(this).addClass('selected'); $(this.slide).unbind();}).hoverIntent(paisesOver,paisesOut);

$("#na-areas-actividade div").tabs({ fx: { opacity: 'toggle', duration: 'fast' }, cookie: { expires: 30 } });

$("#agencias div").tabs({ fx: { opacity: 'toggle', duration: 'fast' }, cookie: { expires: 30 } });

});

function paisesOver(){ $(this).addClass('active'); $(this.slide).fadeIn(); }
function paisesOut(){ switches.removeClass('active'); slides.fadeOut('fast'); }

非常欢迎有关此问题的更多信息的正确方向的任何帮助或指针。

1 个答案:

答案 0 :(得分:1)

我设法使您的代码正常工作(几乎)未经修改。几件事。

  1. hoverIntent不是jQuery方法或事件处理程序。我将其更改为hover
  2. 如果要在标签小部件上使用cookie选项,请确保链接到jQuery cookie插件。我不想去找插件,所以我只是删除了选项。

  3. $(document).ready(function() {
    
        switches = $('#na-paises-list > li');
        slides = $('#na-paises-images > div');
    
        switches.each(function(idx) {
            this.slide = slides[idx];
        }).click(function(){
            $(this).addClass('selected'); 
            $(this.slide).unbind();
        }).hover(paisesOver,paisesOut); 
    
        $("#na-areas-actividade div").tabs({ 
            fx: { 
                opacity: 'toggle', 
                duration: 'fast' 
            }});
    
        $("#agencias div").tabs({
            fx: {
                opacity: 'toggle', 
                duration: 'fast' 
            }});    
    });
    
    function paisesOver() { 
        $(this).addClass('active');
        $(this.slide).fadeIn();
    }
    
    function paisesOut() { 
        switches.removeClass('active'); 
        slides.fadeOut('fast'); 
    }