Jquery - 我的第一個插件 - 我無法獲取要存儲的數據

Question

所以，這是我的第一個jquery插件。它還沒有完成，但我遇到了一個問題。

該函數的一般用途是取一個選擇框並隱藏它，同時製作一個由div等構成的更好看的選擇框。例如，你可能有：

<select class="beautify" id="items" name="select2" > 
    <option value="opt1">Select A Brand</option> 
    <option value="opt2">Option 2</option> 
    <option value="opt3">Option 3</option> 
    <option value="opt4">Option 4</option> 
    <option value="opt5">Option 5</option> 
    <option value="opt6">Option 6</option> 
    <option value="opt7">Option 7</option> 
    <option value="opt8">Option 8</option> 
</select> 

後來的後來，你可以撥打：

$('select.beautify').beautify(); 

所以我大部分的動畫工作，這樣。我試圖找出如何將每個選項的值存儲到各自的錨點。 data（）函數不太適用。我需要將每個選項的值存儲到錨點中，並在單擊錨點時，將選擇值更改爲該值。

這裏的插件：

(function($){ 
    $.fn.beautify = function() { 

     var defaults = { 
      suffix: 'beautify' 
     }; 
     var options = $.extend(defaults, options); 

     return this.each(function() { 
      $(this).hide(); 
      var selectbox = $(this); 
      var suffix = options.suffix; 
      var id = $(this).attr('id'); 
      var mainElement = ''; 
      var headElement = id + 'head' + suffix; 
      var choicesElement = id + 'choices' + suffix; 

      // Build up the main element container 
      mainElement += '<div id="'; 
      mainElement += id + suffix; 
      mainElement += '">'; 
      mainElement += '</div'; 
      $(this).before(mainElement); 

      // Add the head and choices sections 
      $('#' + id + suffix).append('<div id="' + headElement + '"></div>'); 
      $('#' + id + suffix).append('<div id="' + choicesElement + '"></div>'); 

      // Take care of some styling 
      $('#' + id + suffix).addClass('selectouter'); 
      $('#' + headElement).addClass(''); 
      $('#' + choicesElement).addClass('selectchoices'); 

      // Get the choices from the input dropdown 
      $('#' + headElement).append($(this).children(':first').text()); 
      $(this).find('option').each(function(){ 
       $('#' + choicesElement).append('<a href="#">'+$(this).text()+'</a>'); 
       $('#' + choicesElement).slideDown(); 
       $('#' + choicesElement + ':last-child').data('testvar', $(this).val()); 
      }); 

      // Handle animations 
      $('#' + choicesElement).hide(); 
      $('#' + headElement).click(function(){ 
       $('#' + choicesElement).slideToggle(); 
      }); 
      $('#' + id + suffix).mouseleave(function(){ 
       $('#' + choicesElement).slideUp(); 
      }); 

      // A new option has been clicked 
      $('#' + choicesElement + ' a').click(function(event){ 
       event.preventDefault(); 
       $('#' + choicesElement).slideToggle(); 
       $('#' + headElement).html($(this).text()); 

       // Up to now, it's all for looks, actually switch the select value here: 
       alert($(this).data('testvar')); 
      }); 

     }); 
    }; 
})(jQuery); 

即使這個插件是沒有完全結束，我會很感激的批判也。

Answer 1

這是你的代碼修改我寫它的方式。這樣會更高效。我唯一的問題就是你最後想要警惕的是什麼。您正在存儲每個選項的數據，然後提示整個框的數據（不存在）。這是我認爲你正在接受的。

(function ($) { 
     $.fn.beautify = function() { 

      var defaults = { 
       suffix: 'beautify' 
      }; 
      var options = $.extend(defaults, options); 

      return this.each(function() { 
       var selectbox = $(this).hide(), 
         suffix = options.suffix, 
         id = selectbox.attr('id'), 
         mainElement, 
         headElement = $('<div />', {id: id + 'head' + suffix}), 
         choicesElement = $('<div />', {id: id + 'choices' + suffix}); 

       // Build up the main element container 
       mainElement = $('<div />', { 
        id: id + suffix 
       }); 
       selectbox.before(mainElement); 

       // Add the head and choices sections 
       mainElement 
        .addClass('selectouter') 
        .append(headElement) 
        .append(choicesElement); 

       // Get the choices from the input dropdown 
       headElement 
        .addClass('') 
        .append(selectbox.children(':first').text()); 

       selectbox.find('option').each(function() { 
       var link = $('<a />', { 
        href: "#", 
        text: $(this).text() 
       }).data('testvar', $(this).val()); 

        choicesElement.append(link) 
         .slideDown(); 
       }); 

       // Handle animations 
       choicesElement.addClass('selectchoices').hide(); 

       headElement.click(function() { 
        choicesElement.slideToggle(); 
       }); 

       mainElement.mouseleave(function() { 
        choicesElement.slideUp(); 
       }); 

       // A new option has been clicked 
       choicesElement.click(function (event) { 
        event.preventDefault(); 
        choicesElement.slideToggle(); 
        headElement.html(selectbox.text()); 

        // Up to now, it's all for looks, actually switch the select value here: 
        alert($(event.target).data('testvar')); 
       }); 
      }); 
     }; 
    })(jQuery);