附加定制的jQuery功能

我有隐藏或显示与给定的类名元素的功能：附加定制的jQuery功能

$.fn.questionDetails = function(base_element, details_yes_no) { 
    var details_element = '.' + base_element + '_details'; 
    var radio_element = '#' + base_element + '_' + details_yes_no; 

    if ($(radio_element).attr('checked')) { 
    $(details_element).show(); 
    } else { 
    $(details_element).hide(); 
    } 
}

我要附加/绑定这个功能，所以它被称为与加载页面时的两个参数以及给定单选按钮组更改时的两个参数。目前我使用下面的代码来实现：

$(function() { 
    // $.fn.questionDetails defined here, in same scope 

    $.fn.questionDetails('question1', 'yes'); 
    $('input:radio[name=question1]').change().questionDetails('question1', 'yes'); 
}

第一个函数调用工作正常 - 当页面加载question1_details面板要么显示或隐藏。然而，该功能似乎并不当我改变其单选按钮来选择要正确调用，也不当我修改的变化（）线是这个它的工作：

$('input:radio[name=question1]').change($.fn.questionDetails('question1', 'yes'));

我希望能够说“使用这些参数调用此函数，当页面加载时和当给定的单选按钮组发生更改时”，重复次数最少。什么是最好的方式去做这件事？我对jQuery相对来说比较陌生，所以有可能我从一开始就以'错误'的方式做事。

编辑：本来应该提到这个 - 我使用jQuery 1.7.1。

来源

2012-08-06 pwaring

如果你想分配给需要的参数（除事件除外）的事件处理函数的调用，你需要换行呼叫在一个匿名函数，像这样：

$('input:radio[name=question1]').change(function() { 
    $.fn.questionDetails('question1', 'yes') 
});

为什么？因为change()函数需要将函数引用传递给它。当你做change($.fn.questionDetails('question1', 'yes'))时，你将调用$.fn.questionDetails('question1', 'yes')的结果传递给该函数，而不是函数引用。

来源

2012-08-06 09:50:02

谢谢，这似乎工作。这感觉有点浪费来定义一个匿名函数调用另一个函数，而不是单指$ .fn.questionDetails与参数，但我不认为它会在这个特定的项目太多关系。 – pwaring 2012-08-06 10:49:51

我会尝试这样的事：

$('input:radio[name=question1]').change(function(ev) { 
    ev.preventDefault(); 
    $.fn.questionDetails('question1', 'yes'); 
});

在您需要动态地决定哪些PARAMS您传递给回调的情况下，我会trigger自定义事件：

$('input:radio[name=question1]').change(function(ev) { 
    ev.preventDefault(); 
    var param1 = // A param you'd like to pass to the callback 
    var param2 = // Another param 
    $(this).trigger('mycustomevent', [param1, param2]); 
});

之后，你可以绑定你的自定义事件，这会在你的输入改变时被触发，访问像这样的参数：

$('input:radio[name=question1]').on('mycustomevent', function(ev, param1, param2){ 
    $.fn.questionDetails(param1, param2); 
});

编辑：

正如您在jQuery doc中看到的那样，触发器函数允许您包含一个参数数组，它将传递给回调函数。

我猜你正在使用jQuery 1.7或更高版本。如果不是这种情况，则必须使用bind或live函数代替on来附加事件。

来源

2012-08-06 09:51:32 davids

谢谢，我最终还是采用了你的第一个建议。 – pwaring 2012-08-06 15:38:26

首先，而不是change()函数尝试使用on()函数，如果您使用的是jquery 1.7。*。如果您使用的是早期版本，请使用bind()或live()。

如果你想使用的变化（），则没有通过函数作为参数传递给change.Instead，可以使用匿名函数，然后调用匿名函数内部功能。

来源

2012-08-06 09:53:19 Kaustubh

什么是使用。对优势（ '变'，函数（））超过.change（函数（））？ – pwaring 2012-08-06 10:22:09

@pwaring 好。使用上给你我恐怕不能帮助你。我的选项设置为OFF it.and进行更深入的差异也很新的jquery.you可以在这里问有经验的球员。 – Kaustubh 2012-08-06 13:16:00

试试这个

$.fn.questionDetails = function(base_element, details_yes_no) { 
    var details_element = '.' + base_element + '_details'; 
    var radio_element = '#' + base_element + '_' + details_yes_no; 

    $(radio_element).change(function(){ 
     $(details_element).toggle(); 
    }); 
}

来源

2012-08-06 10:01:55

附加定制的jQuery功能

回答

相关问题