在 Tabs UI 中将 jQuery 函数集成到另一个函数中

Question

我正在尝试将一个功能集成到另一个功能中并且很困惑。

我要做的是添加一个 jQuery 函数，该函数将调用随机引用，并且我希望该函数在 jQuery 选项卡 UI 中的选项卡更改时触发。

这是随机引用函数：

$.get('quotes.txt', function(data) {
        var quotes = data.split("\@");
        var idx = Math.floor(quotes.length * Math.random());
        $('.quotes').html(quotes[idx]);
    });

下面是选项卡初始化（以及另一个在选项卡更改时折叠 div 的函数）：

$(document).ready(function() { 
    var $tabs= $("#tabs").tabs({
        fx : { 
            opacity: 'toggle' 
        },
        select : function(event, ui) {
            $(".entry-content").hide();                
        }                  //I assume it goes near here, but no luck
    }); 
});

引号函数是否需要先调用变量？

而且，如何让引号 div 在更改引号时也使用 fx 不透明度效果？

2011 年 4 月 27 日编辑

这工作并在函数中使用了fx效果：

$(document).ready(function () {
    var $tabs = $("#tabs").tabs({

        fx: {
            opacity: 'toggle'
        },

        select: function (event, ui) {
            $(".entry-content").hide();

            $('div#quotescontainer').load('quotes.html', function () {
                var $quotes = $(this).find('div.quote');
                var n = $quotes.length;
                var random = Math.floor(Math.random() * n);
                $quotes.hide().eq(random).fadeIn();
            });
        }
    });
});

Answer 1

代码应该放在大括号内

$(document).ready(function() { 
    var $tabs= $("#tabs").tabs({
        fx : { 
            opacity: 'toggle' 
        },
        select : function(event, ui) {
            $(".entry-content").hide();                
            // <-- code goes here
        }                  //I assume it goes near here, but no luck <-- NO!
    }); 
});

就个人而言，我会将它放在选项卡的“显示”事件中，但这应该不是问题。

我已经设置了一些测试代码，让你看看它应该是怎样的：http://jsfiddle.net/PyN5Y/1/

$( "#tabs" ).tabs({
    select: function(event, ui) {
        alert('triggered on select');
        doStuff();    
    },
    show: function(event, ui) {
        alert('triggered on show');
        doStuff();
    }
});

function doStuff() {
    alert('doing stuff');
}

Answer 2

以下是我将如何监控选项卡上的更改，然后启动您的报价功能。

$("#tabs ul li a").click(function(e) {
  update_quote();
}); 

function update_quote() {
    $.get('quotes.txt', function(data) {
        var quotes = data.split("\@");
        var idx = Math.floor(quotes.length * Math.random());
        $('.quotes').fadeOut();
        $('.quotes').html(quotes[idx]);
        $('.quotes').fadeIn();
    });
}

update_quote 函数可以清理并变得更简单，我把它写得很详细，所以你可以看到如何更新它。您也可以链接您的 jquery 效果。