點擊事件中的jQuery函數

Question

以下工作正常：

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

而不是每次點擊事件內部，我只是通過更改參數來調用此函數

Answer 1

是的..你可以做到..這是例子...

單擊函數（此示例為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);
    });  
}

就像明智的做法，您可以使用參數來調用另外兩個的click函數。

Answer 2

創建一個新功能

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

將新功能綁定到元素的click事件

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

Answer 3

您可以將數據傳遞給處理程序：

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);