创建一个jQuery插件，该插件在同一页面上多次实施时存在问题

Question

我创建了一个jQuery插件，将通用选择框更改为漂亮的内容，但是我遇到了一个问题，当该插件在页面上多次使用时，我会遇到问题，例如，当我触发将下拉菜单中的选项，页面上所有下拉菜单的选择，如何停止？

我的密码

    /***********
* 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的元素，看起来您的插件正在为每个选择创建一个id = "dropdown"的dl ）。 您想要做的是在上下文中选择当前obj的下拉列表，所以大概是这样的

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

对其他事件也是如此，请在当前元素的上下文中使用选择器。