Question

我创建了一个jQuery插件，将通用选择框更改为漂亮的东西，但是我遇到了问题，当插件在页面上多次使用时遇到问题，例如当我触发click事件时滑动下拉列表的选项，页面上的所有选项滑落，我该如何阻止它？

我的代码

    /***********
* Select-Me create pretty select lists using a <ul> inplace of the <select>
* Author: Simon Ainley
* 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() {
                //get an instance of the object we are working with
                var obj = $(this);
                var obj_name = obj.attr('name');
                obj.closest('form').append('<input type="hidden" id="dropdown_value" value="" name="'+obj_name+'"/>');
                var options = $("option", obj);
                var replacement_list_heading = "<dl id='dropdown'><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(){
                    $("#dropdown 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() {
                    $("#dropdown dd").slideToggle(defaults.speed);
                    return false;
                });

                $("#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);

Answer 1

当附加事件处理程序（如click）时，您要做的是在当前obj的上下文中找到元素，现在您有一个非常通用的选择器，即

$("#dropdown dt a").click(function() {

这将选择所有下拉列表（顺便说一下，您不能拥有两个具有相同ID的元素，看起来您的插件正在为每个选择创建一个dl id = "dropdown"。您要做的是选择当前obj的上下文中的下拉菜单，大致可能是这样的

obj.closest('.dropdown dt a').click(function() {...

对其他事件也一样，使用上下文中的选择器到当前元素。

创建一个jQuery插件，在同一页面上多次实现时会出现问题

1 个答案: