0

以下はうまくいきます：

    classes_tab.click(function(evt){
        evt.preventDefault();
        h_c.filter(':visible').fadeOut(fast, function(){
            disactive.removeClass('active');
            classes_tab.addClass('active');
            classes.fadeIn(fast);
        });
    });

    contacts_tab.click(function(evt){
        evt.preventDefault(evt);
        h_cl.filter(':visible').fadeOut(fast, function(){
            disactive.removeClass('active');
            contacts_tab.addClass('active');
            contacts.fadeIn(fast);
        });
    });

    home_tab.click(function(evt){
        evt.preventDefault();
        c_cl.filter(':visible').fadeOut(fast, function(){
            disactive.removeClass('active');
            home_tab.addClass('active');
            home.fadeIn(fast);
        });
    });

クリックイベント内で何が起こっているかを毎回繰り返さずに、このクリックイベントの前に関数を書く方法はありますか?

次のようなものがあるとします。

function tabs(x, y){
    x.fadeOut(fast);
            y.fadesIn(fast);
        }

各クリックイベント内よりも、パラメーターを変更してこの関数を呼び出すだけです

4

3 に答える 3

2

はい..あなたはそれを行うことができます..ここに例があります...

関数 (この例では home_tab) をクリックします。

...click(function(event){
     evt.preventDefault();
    functionName('c_cl','home_tab','home');
});

関数

function functionName(x,y,z)
{
        var x = $(#x)|| var y = $(#y)|| var z=$(#z) //add your selector here(this is just and examplr) 
        x.filter(':visible').fadeOut(fast, function(){
        disactive.removeClass('active');
        y.addClass('active');
        z.fadeIn(fast);
    });  
}

同様に、パラメータを使用して、他の2つのクリック関数を呼び出すことができます..

于 2012-11-07T10:27:16.933 に答える
1

新しい関数を作成する

function myFunc(evt, active_tab, container){
        evt.preventDefault(evt);
        h_cl.filter(':visible').fadeOut(fast, function(){
            disactive.removeClass('active');
            active_tab.addClass('active');
            container.fadeIn(fast);
        });
}

新しい関数を要素のクリック イベントにバインドする

home_tab.click(function(evt){
      myFunc(evt,home_tab, home);
    });
});

classes_tab.click(function(evt){
      myFunc(evt,classes_tab, classes);
    });
});

contacts_tab.click(function(evt){
      myFunc(evt,contacts_tab, contacts);
    });
});
于 2012-11-07T10:25:58.330 に答える
1

ハンドラにデータを渡すことができます:

function tabsHandler(evt){
    evt.preventDefault();
    evt.data.x.fadeOut(fast);
    evt.data.y.fadesIn(fast);
}
$('.home_tab').on('click', {x : $foo, y : $bar}, tabsHandler);
// where $foo and $bar are references to jQuery objects

または、次のことができます。

function tabsHandler(x, y){
    x.fadeOut(fast);
    y.fadesIn(fast);
}
$('.home_tab').on('click', function(evt){
    evt.preventDefault();
    tabsHandler($foo, $bar);
});

または、最初に他のオブジェクトへの参照を保存してからdata、ハンドラーで使用することもできます。次のようなことを試してください：

// Your class names are my assumption
var $home_tab = $('.home_tab');
var $classes_tab = $('.classes_tab');
// I'm also assuming c_cl, h_c, disactive and home are existing jQuery objects
$home_tab.data({
    'cl' : c_cl,
    'disactive' : disactive,
    'objectToFadeIn': home
});

$classes_tab.data({
    'cl' : h_c,
    'disactive' : disactive,
    'objectToFadeIn': classes
});

function tabsHandler(evt){
    evt.preventDefault();
    var $tab = $(this);
    $tab.data('cl').filter(':visible').fadeOut(fast, function(){
        $tab.data('disactive').removeClass('active');
        $tab.addClass('active');
        $tab.data('objectToFadeIn').fadeIn(fast);
    });
}

$home_tab.click(tabsHandler);
$classes_tab.click(tabsHandler);

または最後のビット:

$(document).on('click', '.home_tab, .classes_tab', tabsHandler);
于 2012-11-07T10:34:33.757 に答える