Question

我有一个隐藏或显示给定类名的元素的函数：

$.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面板。但是，当我更改选择了哪个单选按钮时，似乎没有正确调用该函数，当我将change（）行修改为时，它也不起作用：

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

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

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

Answer 1

如果要将对参数（事件除外）的函数的调用分配给事件处理程序，则需要将该调用包装在匿名函数中，如下所示：

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

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

Answer 2

我会尝试这样的事情：

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

如果您需要动态决定将哪些参数传递给回调，我会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来附加活动。

Answer 3

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

如果你确实想使用change（），那么不要将该函数作为参数传递给更改。相反，使用匿名函数，然后在该匿名函数内调用你的函数。

Answer 4

试试这个

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

在文档就绪和元素更改上附加自定义jQuery函数

4 个答案: