[英]jQuery functions inside click events
The following works fine: 以下工作正常:
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);
});
});
Is there a way of writing a function before this click events without repeating every time what is happening inside the click event? 有没有一种方法可以在此单击事件之前编写函数,而不必每次都重复单击事件内部发生的一切?
Say I have something like: 说我有类似的东西:
function tabs(x, y){
x.fadeOut(fast);
y.fadesIn(fast);
}
than inside each click event I just call this function by changing parameters 而不是每次点击事件内部,我只是通过更改参数来调用此函数
yes.. u can do that.. here is the example... 是的..你可以做到..这是例子...
Click function (home_tab for this example).. 单击函数(此示例为home_tab)。
...click(function(event){
evt.preventDefault();
functionName('c_cl','home_tab','home');
});
Function 功能
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);
});
}
like wise u can call the click function for two others.. with the parameters.. 就像明智的做法,您可以使用参数来调用另外两个的click函数。
Create a new Function 创建一个新功能
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);
});
}
Bind the new function to the click event of an element 将新功能绑定到元素的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);
});
});
You can pass data to your handlers: 您可以将数据传递给处理程序:
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
Or you can do: 或者,您可以执行以下操作:
function tabsHandler(x, y){
x.fadeOut(fast);
y.fadesIn(fast);
}
$('.home_tab').on('click', function(evt){
evt.preventDefault();
tabsHandler($foo, $bar);
});
Or you could store references to other objects in data
first and then use them in handlers. 或者,您可以先将对其他对象的引用存储在data
,然后在处理程序中使用它们。 Try something like this: 尝试这样的事情:
// 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);
Or for the last bit: 或最后一点:
$(document).on('click', '.home_tab, .classes_tab', tabsHandler);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.