如何将函数作为 jQuery 插件的参数传递

Question

我正在尝试编写一个简单的 jQuery 插件来显示警报框（自定义 html + css），并将 yes 和 no 按钮绑定到作为插件调用的参数传递的函数。

到目前为止，这是我的代码：

(function($) {
$.fn.triggerAlert = function (msg,yes,no) {
    $('#alert_mask').find("span:first").html(msg);
    $('#alert_mask').toggle();

    $('#alert_mask #alert_yes').click(function (yes) {
        if (typeof yes == 'function') { 
            yes($(this));
        }
        $('#alert_mask').hide();
        return false;       
    });

    $('#alert_mask #alert_no').click(function (no) {
        if (typeof no == 'function') { 
            no($(this));
        }
        $('#alert_mask').hide();
        return false;       
    });

}   
})(jQuery);

这是正确的轨道还是完全错误的？

谢谢

更新：在 Logan F. Smyth 回答之后，我必须做出调整，因为 yes 的点击事件并且这里没有按钮被定义多次。为了将来的参考或为了其他人的利益，这里是完整的插件。

(function($) {
  $.fn.triggerAlert = function (trigger,msg,yes,no) {
    var mask = $('#alert_mask');
    $(trigger).click(function (e) {
        mask.find("span:first").html(msg);
        mask.toggle();
        e.preventDefault();
    });

    $('#alert_yes').click(function (e) {
      if (yes) yes($(this));
      mask.hide();
      e.preventDefault(); 
    });
    $('#alert_no').click(function (e) {
      if (no) no($(this));
      mask.hide();
      e.preventDefault();
    });
  }   
})(jQuery);

以及如何调用它的示例

 $().triggerAlert(
    $('#some_element'),
    'hello world',
    function() { alert('yes') },
    function() { alert('no')  }
  );

Answer 1

我看到的主要问题是您的点击处理程序采用“no”和“yes”参数，这意味着在这些函数内部，yes 和 no 不会是您传递给整个插件的内容。

让您的选择使用两个 id 也是不必要的，因为 id 无论如何都是唯一的。最后返回 false 是一个坏主意，请使用 PreventDefault 代替。

(function($) {
  $.fn.triggerAlert = function (msg,yes,no) {
    var mask = $('#alert_mask');
    mask.find("span:first").html(msg);
    mask.toggle();

    $('#alert_yes').click(function (e) {
      if (yes) yes($(this));
      mask.hide();
      e.preventDefault(); 
    });
    $('#alert_no').click(function (e) {
      if (no) no($(this));
      mask.hide();
      e.preventDefault();
    });
  }   
})(jQuery);

要触发此操作，您可以调用该函数并传递两个函数，如下所示：

$('#some_element').click(function(e){
  $(this).triggerAlert(
    'hello world',
    function() { alert('yes') },
    function() { alert('no')  }
  );
  e.preventDefault();
})

Answer 2

参数在函数作用域内，你可以这样尝试

  $('#alert_mask #alert_no').click(function() {
    if (typeof no == 'function') { 
        no($(this));
    }
    $('#alert_mask').hide();
    return false;       
});