第一次定時器jquery插件問題

Question

我想寫一個選擇菜單的插件，底部字段是「自定義」，選擇它將導致輸入框。

這是我第一次寫一個jQuery插件，我想對我怎麼能去這樣做徵求你的意見：

所以我有以下代碼：

(function($) { 
    const CUSTOM_CLASS = 'custom'; 
    const HOLDER_CLASS = 'holder'; 

    $.fn.editableDrop = function() { 
    function _make_input() { 
     /* Ultimately, we want: 
     * <select> </select> 
     * <span> 
     * <input /> 
     * <a href='#'>Submit</a><a href='#'>Cancel</a> 
     * </span> 
     */ 

     var $holder = $('<span>').css('display', 'none'); 
     $holder.append($('<input type="text">').attr('class', HOLDER_CLASS)); 
     $holder.append($('<a class="cancel" href="#">Cancel<a/>')); 
     $holder.append($('<a class="edit" href="#">Edit<a/>')); 
     return $holder; 
    } 

    function main(jq) { 
     /* Takes a select tag jquery object and does the following: 
     * -1) First put submit there 
     * 0) Inject input as a sibling with display none. 
     * 1) Inject a final option at the bottom 
     * 2) When that is focused, change to input with a cancel button 
     * 3) When cancel is pressed turn back to dropdown 
     * 4) Check that everytime pressing Enter will disable the input 
     */ 
     var $select = $(jq); 
     var $inputs = _make_input() 
     var $holder = $('.'+HOLDER_CLASS, $inputs); 
     var $edit = $('.edit', $inputs); 
     var $cancel = $('.cancel', $inputs); 

     $inputs.insertAfter($select); 
     $last = $("<option>").attr('class', CUSTOM_CLASS).text('custom').appendTo($select); 
     $holder.val($('option:first-child', $select).text()); // set initial value 

     // Don't return false here since they will be wrapped inside functions. 
     // return false inside the handler 

     var edit = function() { 
     // Doesn't clear custom text. Do it yourself 
     $holder.attr('disabled', false); 
     $inputs.css('display', 'inline'); 
     $select.css('display', 'none'); 
     $edit.css('display', 'none'); 
     $cancel.css('display', 'inline'); 
     } 

     var reset = function() { 
     $inputs.css('display', 'none'); 
     $select.css('display', 'inline'); 
     $('option:first-child', $select).attr('selected', true); // Defaults sets the first element to selected 
     $holder.val($('option:first-child', $select).text());  // Resets the value 
     } 

     var submit = function() { 
     $holder.attr('disabled', true); 
     $edit.css('display', 'inline'); 
     $cancel.css('display', 'none'); 
     } 

     var value = function() { 
     return $holder.val(); 
     } 


     /* These are just event listeners */ 
     $select.change(function() { 
     var $sel = $select.children('*[selected]'); 
     $holder.val($sel.val()); 
     if ($sel.attr('class') == CUSTOM_CLASS) { // if the class name is selected, turn into input box 
      $holder.val("");   // clears custom text 
      edit(); 
      return false; 
     } 
     }); 

     $('a.cancel', $inputs).click(function() { 
      cancel(); 
      return false; 
     }); 

     $holder.keypress(function(event) { 
     if (event.which == 13) { 
      submit(); 
      return false; 
     } 
     }); 

     $edit.click(function() { 
     edit(); 
     return false; 
     }); 

     return $(this); 
    } 

    }; 
})(jQuery); 

我道歉代碼有點長。但它的作用基本上是這樣的：

1. 當你給我一個選擇 元素，它創建的最後 選項，「自定義」。
2. 選擇 定製將變成一個輸入 箱
3. 當輸入框出現 可以按取消
4. 等等等等

首先，我想作以下功能公衆： （） 2. value（）

我應該怎麼寫這個？ 1.我只想讓dom做一次。

Answer 1

爲了reset和value公衆，你可以做到以下幾點：你需要公開他們

$.fn.editableDrop.yourVar = 1; 

另一種方法是做一個「類」

$.fn.editableDrop = function() { 
    // ... 
}; 

// placing them under `editableDrop` 
$.fn.editableDrop.reset = function() { }; 
$.fn.editableDrop.value = function() { }; 

從editableDrop要訪問的變量

var Editable = function(){ 
    this.yourVar = 2; // public 
    var notPublic = 1; // private 
}; 

var obj = (new Editable()); 
obj.yourVar; // 2 
obj.notPublic; // undefined