javascript - 误解 Javascript 函数调用

Question

我尝试自定义HTML文件输入并编写了最简单的jquery API函数:

(function($)
{    
  $.fn.selectFileInputGUI = function()
  { 
    var outerWrapper = $('<div>').css({'display':'inline-block'});
    var innerWrapper = $('<div>').css({'width':'0', 'height':'0', 'overflow':'hidden'});
    var fileInput    = $('<input>').attr({type:'file'});
    var fileNameHTML = $('<div>').css({'display':'inline-block', 'margin-left':'3px'});

    var selectBtnGUI = $('<button>').addClass('btn btn-success btn-sm').text('Select file').click(function()
       {
          $.fn.selectFileInputGUI.resetInput();
          fileInput.trigger('click');
       });

       fileInput.on('change', function()
       {   
          $.fn.selectFileInputGUI.displayFileName();
       });

    $(this)
    .append(outerWrapper.append(innerWrapper.append(fileInput)).append(selectBtnGUI))
    .append(fileNameHTML);

   $.fn.selectFileInputGUI.displayFileName = function()
   {
      var fileName = fileInput.val();
      if(fileName.length > 0)
      {
          var pos = fileName.lastIndexOf("\\");
          if(pos != -1) fileName = fileName.substr(pos + 1);
          if(fileName.length > 14) fileName = fileName.substr(0, 14) + '...';
       } else
       {
          fileName = 'File not selected';
       }
       fileNameHTML.text(fileName);
};


   $.fn.selectFileInputGUI.resetInput = function()
   {           
     fileInput.wrap('<form>').parent('form').trigger('reset');
     fileInput.unwrap();
   };   
}
})(jQuery);

当我尝试将 selectFileInputGUI api 函数应用于多个选择器时，只有最后一个选择器处理得很好 - http://jsfiddle.net/URKM5/5/

如何正确实现？

Answer 1

看来您的问题在于如何重用变量 fileInput和fileNameHTML ，在用户选择文件后，您将其称为 $.fn.selectFileInputGUI.displayFileName(); fileInput和fileNameHTML始终引用fileInput和fileNameHTML第二个文件对话框(因为第二个文件对话框是在第一个文件对话框之后初始化的，并且所有这些变量都被覆盖)。因此，要解决这个问题，您必须通过所谓的事件数据来传递这些变量，这在这种情况下很有帮助:

//Note the second argument, it's passed in as event data
//You can access the event data via e.data
fileInput.on('change', fileNameHTML, function(e) {              
    $.fn.selectFileInputGUI.displayFileName($(this), e.data);
});

您的displayFileName需要接受2个参数，第一个指fileInput (可以在 $(this) 的 onchange 事件处理程序中作为 fileInput 传入)，第二个引用 fileNameHTML (作为 e.data 传入)。

//note about the change of the arguments
$.fn.selectFileInputGUI.displayFileName = function(fileInput, fileNameHTML) {
   //the code is unchanged here ...
}

现在，在两个对话框之间选择文件是独立的。

Demo.

在深入研究问题之后，看起来您不需要在此处使用事件数据。只需通过fileNameHTML右作为 displayFileName(...) 的第二个参数功能。 <强> Updated Demo