Question

我正在创建一个插件，允许我将选择框更改为漂亮的东西，我这样做是通过将页面上的选择框更改为定义列表，定义描述我正在嵌套其中是ul，而li是选择列表中的值。

我遇到了一个问题，但是如果我在页面上有3个选择框我会遇到一个奇怪的错误，我无法确定我的代码中哪里出错了但是多个dd是多少被添加到每个dl，例如第二个{{1}}有2个dl，因为它应该有一个，就像第三个选择框应该有1个dd但它有3个dd ，似乎创建的dd的数量与循环的索引相匹配。我怎样才能使每个dl只创建一个dd，并添加正确的选项。

这是我的插件代码，

    /***********
* Select-Me create pretty select lists using a <ul> inplace of the <select>
* Author: Simon Ainley (on behalf of The Factory Agency)
* Version: 0.0.1
***********/
(function($){  
    $.fn.selectMe = function(options) {  
        var defaults = {
            select_text : null,
            remove_first_value : false,
            speed : 1000
        }

        var options = $.extend(defaults, options);

        return this.each(function(index) {
            //get an instance of the object we are working with
            var obj = $(this);
            var obj_name = obj.attr('name');
            console.log(obj_name);
            obj.closest('form').append('<input type="hidden" class="dropdown_value" value="" name="'+obj_name+'"/>');
            var options = $("option", obj);
            var replacement_list_heading = "<dl class='dropdown "+obj_name+"'><dt><span>"+defaults.select_text+"</span><a href=''>Go</a></dt></dl>";
            obj.closest('form').prepend(replacement_list_heading);
            var values_start = "<dd class='shadow_50'><ul></ul></dd>";
            $(".dropdown").append(values_start);
            if(defaults.remove_first_value == true) {
                options.splice(0, 1);
            }
            options.each(function(index){
                    $(".dropdown." + obj_name + " dd ul").append(
                        '<li><a href="#"><span class="option">' + 
                        $(this).text() + '</span><span class="value">' + 
                        $(this).val() + '</span></a></li>'
                    );

            });

            obj.remove();

            $('.dropdown li a').hover(function() {
                $(this).parent('li').addClass('hover');
            }, function() { 
                $(this).parent('li').removeClass('hover');
            });

            $(".dropdown dt a").click(function(e) {
                $(this).closest("dl").find("dd").slideToggle(defaults.speed);
                e.preventDefault();
            });

            $(".dropdown ul a").click(function(e) {
                var value = $(this).find('span').text();
                $(this).addClass('selected');
                $(".dropdown_value").val(value);
                $(".dropdown dt span").text($('.selected .option').text());
                $(".dropdown dd").slideUp(defaults.speed);
                $(this).removeClass('selected');
                e.preventDefault();
            });
        });
    };  
})(jQuery);

我认为问题出在代码的这些部分中，

var options = $("option", obj); - 我想我需要区分每组选项吗？

options.each(function(index){

                    $(".dropdown." + obj_name + " dd ul").append(
                        '<li><a href="#"><span class="option">' + 
                        $(this).text() + '</span><span class="value">' + 
                        $(this).val() + '</span></a></li>'
                    );

            });

我相信这一点只是循环而不管它是否应该停止并将选项添加到新的dd？

任何帮助都会很棒！

我如何调用我的插件，

    $(".type select").selectMe({
    select_text : "I'm looking for...",
    remove_first_value : true,
});

$(".skill select").selectMe({
    select_text : "Skill",
    remove_first_value : true,
});

$(".gender select").selectMe({
    select_text : "Gender",
    remove_first_value : true,
});

和更改后的HTML

    div class="grid_4">
                        <fieldset>
                                <div class="formRow drop_down">

<select name="type">
<option value="0" selected="selected">I'm looking for...</option>
<option value="1">actors</option>
<option value="2">presenters</option>
<option value="3">voice overs</option>
</select>
    </div>
                        </fieldset>
                    </div>

                    <div class="grid_4">

                        <fieldset>
                                <div class="formRow drop_down">
<select name="skill">
<option value="0" selected="selected">Skill</option>
<option value="1">actors</option>
<option value="2">presenters</option>
<option value="3">voice overs</option>
<option value="4">dancers</option>
<option value="5">accents</option>

<option value="6">film</option>
<option value="7">tv</option>
</select>
    </div>
                        </fieldset>
                    </div>

                    <div class="grid_4">
                        <fieldset>  
                                <div class="formRow drop_down">
<select name="gender">

<option value="0" selected="selected">Gender</option>
<option value="1">male</option>
<option value="2">female</option>
</select>
    </div>
                        </fieldset>
                    </div>

Answer 1

目前我不确定它是如何执行的，选择器“.type select”不会从你提供的HTML中返回任何内容 - 为了工作，你需要一个{{1 }}＆GT;并<div class='type'缠绕在您的第一个</div>。

我可以看到为什么你会得到多个DD，但是在你的插件中执行这个：

<select>

该选择器将定位到目前为止在页面上创建的每个.dropdown类。因此，对于每次后续调用插件，您都会将DD元素添加到已创建的DL元素中。

我认为你想要var values_start = "<dd class='shadow_50'><ul></ul></dd>"; $(".dropdown").append(values_start);。

因为最后的事件调用通常是针对.dropdown类，所以它们会遇到同样的问题，在每个元素上创建多个事件。

你在整个插件中进行了很多选择器调用，这将导致jQuery查看整个DOM（例如在你的选项.each函数中）。由于您只需要构建一个单独的元素然后添加到页面中，因此您应该考虑将其构建并将其添加到页面中而不使用其他选择器。

从选择中获取值并将它们移动到ul - jquery

1 个答案: