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

Question

我正在尝试在一个 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'); }

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

Answer 1

我设法让您的代码在未修改的情况下（几乎）正常工作。几件事。

1. hoverIntent 不是 jQuery 方法或事件处理程序。我把它改成了hover。
2. 如果您想使用选项卡小部件上的 cookie 选项，请确保链接到 jQuery cookie 插件。我不想去找插件，所以我只是删除了该选项。

---

$(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'); 
}