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（）函数不太起作用。我需要将每个选项的值存储到一个锚中，并在单击锚点时，将select的值更改为该值。

这是插件：

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

Jquery - 我的第一个插件 - 我无法获取要存储的数据

1 个答案: