Question

我正在制作我的第一个文件上传器jquery插件（在coffeescript中）：

    $.fn.uploadable = (opts={}) ->
      console.log $(@).attr('type') # undefined
      event = if $(@).attr('type') is 'file' then 'change' else 'drop'
      @
      .on event, (evt) ->
        # do something
        off
      .on 'dragover', (evt) -> off


    $('#files_input, #drop_zone').uploadable

所以你可以看到，在第一个.on（）中，我确定事件的元素是否是一个浏览文件按钮;如果是，那么当用户将听到这个元素的“更改”事件选择文件，如果没有，那么我认为它是一些普通的旧div或HTML5拖放操作。

所以我在一个INPUT元素和一个DIV元素上使用插件。正如您从我的console.log中看到的那样记录了'undefined'

到目前为止，我只知道像attr（）这样的调用方法，只能从列出的选择器元素中获取结果。但我需要为每个匹配的元素单独设置.on（event）的事件变量。我怎么能这样做？

谢谢

Answer 1

通常的插件模式看起来像这样：

$.fn.plugin = function(options) {
    options = $.extend({ }, $.fn.plugin.defaults, options || { });
    return this.each(function() {
        // Do things to $(this) to set up your plugin.
    });
};
$.fn.plugin.defaults = { ... };

CoffeeScript版本将是：

$.fn.plugin = (options = { }) ->
    options = $.extend({ }, $.fn.plugin.defaults, options)
    @.each ->
        # Do things to $(@) to set up your plugin
$.fn.plugin.defaults = { ... }

return的{{1}}部分为您提供了通常的链接，return this.each部分允许插件同时绑定到多个内容。

应用此案例会给你：

this.each

jquery插件没有将插件代码体应用于每个匹配的元素

1 个答案: