0

ある機能を別の機能に統合しようとしていて、困惑しています。

私がやろうとしているのは、ランダムな引用符を呼び出す 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 opacity 効果も使用するようにするにはどうすればよいでしょうか?

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

2 に答える 2

1

タブの変更を監視してから、見積もり機能を開始する方法を次に示します。 

$("#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 エフェクトをチェーンすることもできます。

于 2011-04-27T04:40:55.740 に答える
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');
}
于 2011-04-27T04:50:56.133 に答える