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();

所以我可以让大部分动画正常工作等等。我试图弄清楚如何将每个选项的值存储到各自的 anchor 。 data() 函数不太工作。我需要将每个选项的值存储到 anchor 中，然后单击 anchor 时，将选择的值更改为该值。

这是插件:

    (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);