Javascript 正在覆盖jQuery.data（）

我目前为我正在编写的jQuery工具提示插件编写了以下代码。我使用jQuery的.data（）方法存储每个工具提示的配置。但是，当我去检索数据时，它已被完全不同的选择器中最近存储的数据覆盖。我无法理解这个问题，因为它在运行之前，然后突然停止。要查看的主要区域是addTooltip（）、removeTooltip（）和displayTooltip（）

例如：

$('#tooltip1').addTooltip('tooltip', { 'direction': 'bottom' });
$('#tooltip2').addTooltip('tooltip', { 'direction': 'left' });

在上面的示例中，我选择了两个完全不同的元素，但是当我显示#tooltip1工具提示时，它将使用#tooltip2的配置，在本例中是“方向”：“左”

感谢您的帮助

(function($) {

// Used as a template for addTooltip()
var tooltipDefaults = {
    'class': null,
    'showOn': 'mouseenter',
    'hideOn': 'mouseleave',
    'direction': 'top',
    'offset': 0
}

// Store generated IDs to avoid conflicting IDs
var tooltipIds = new Array();

// Keep track of displayed popups
var displayedTooltips = new Array();

function generateUniqueId()
{
    var id;

    do {
        id = Math.floor(Math.random()*90000) + 10000;
    } while ($.inArray(id, tooltipIds) !== -1);

    tooltipIds.push(id);
    return id;
}

function getUniqueId(id)
{
    return parseInt(id.substr(0, 5));
}

function isUniqueId(id)
{
    return !NaN(getUniqueId(id));
}

function removeUniqueId(id)
{
        var id = getUniqueId(id);

        var idIndex = $.inArray(id, tooltipIds);

        if (idIndex !== -1) {
            tooltipIds.splice(idIndex);
        }
}

$.fn.displayTooltip = function()
{
    var element = $(this);
    var tooltip = $('#' + element.attr('data-tooltip-id'));
    var config = element.data('config');

    var offset = element.offset();

    var left;   
    var top;

    switch (config.direction) {
        case 'left':
            top = offset.top + "px";
            left = offset.left - tooltip.outerWidth() - config.offset + "px";
            break;
        case 'top':
            top = offset.top - element.outerHeight() - config.offset + "px";
            left = offset.left + ((element.outerWidth() / 2) - (tooltip.outerWidth() / 2)) + "px";
            break;
        case 'right':
            top = offset.top + "px";
            left = offset.left + element.outerWidth() + config.offset + "px";
            break;
        case 'bottom':
            top = offset.top + element.outerHeight() + config.offset + "px";
            left = offset.left + ((element.outerWidth() / 2) - (tooltip.outerWidth() / 2)) + "px";
            break;
    }

    tooltip.css({
        'position': 'absolute',
        'left': left,
        'top': top,
        'z-index': 5000
    });

    if (element.isTooltipDisplayed()) {
        return;
    }

    tooltip.show();
    displayedTooltips.push(element.attr('id'));
}

$.fn.hideTooltip = function()
{
    var element = $(this);

    var idIndex = $.inArray(element.attr('id'), displayedTooltips);

    if (idIndex !== -1) {
        displayedTooltips.splice(idIndex);
    }

    $('#' + element.attr('data-tooltip-id')).hide();
}

$.fn.addTooltip = function(content, params)
{
    var config = $.extend(tooltipDefaults, params);

    return this.each(function() {
        var element = $(this);

        // If the element already has a tooltip change the content inside of it
        if (element.hasTooltip()) {
            $('#' + element.attr('data-tooltip-id')).html(content);
            return;
        }

        var tooltipId = (element.is('[id]') ? element.attr('id') : generateUniqueId()) + '-tooltip';
        element.attr('data-tooltip-id', tooltipId);

        var tooltip = $('<div>', {
            id: tooltipId,
            role: 'tooltip',
            class: config.class
        }).html(content);

        $('body').append(tooltip);

        /**
         * If showOn and hideOn are the same events bind a toggle
         * listener else bind the individual listeners
         */
        if (config.showOn === config.hideOn) {
            element.on(config.showOn, function() {
                if (!element.isTooltipDisplayed()) {
                    element.displayTooltip();
                } else {
                    element.hideTooltip();
                }
            });
        } else {
            element.on(config.showOn, function() {
                element.displayTooltip();
            }).on(config.hideOn, function() {
                element.hideTooltip();
            });
        }

        // Store config for other functions use
        element.data('config', config);

        // Saftey check incase the element recieved focus from the code running above
        element.hideTooltip();
    });
}

$.fn.hasTooltip = function()
{
    return $(this).is('[data-tooltip-id]');
}

$.fn.isTooltipDisplayed = function()
{
    var element = $(this);

    if (!element.hasTooltip()) {
        return false;
    }

    return ($.inArray(element.attr('id'), displayedTooltips) === -1) ? false : true;
}

$.fn.removeTooltip= function()
{
    return this.each(function() {
        var element = $(this);
        var tooltipId = element.attr('data-tooltip-id');
        var config = element.data('config');

        $('#' + tooltipId).remove();

        if (isUniqueId(tooltpId)) {
            removeUniqueId(tooltipId);
        }

        element.removeAttr('data-tooltip-id');

        if (config.showOn === config.hideOn) {
            element.off(config.showOn);
        } else {
            element.off(config.showOn);
            element.off(config.hideOn);
        }

        element.removeData('config');
    });
}

// Reposition tooltip on window resize
$(window).on('resize', function() {
    if (displayedTooltips.length < 1) {
        return;
    }

    for (var i = 0; i < displayedTooltips.length; i++) {
        $('#' + displayedTooltips[i]).displayTooltip();
        console.log(displayedTooltips);
    }
});
}(jQuery));

（函数（$）{
//用作addTooltip（）的模板
变量tooltipDefaults={
“类”：null，
“showOn”：“mouseenter”，
“hideOn”：“mouseleave”，
“方向”：“顶部”，
“偏移量”：0
}
//存储生成的ID以避免ID冲突
var tooltipIds=新数组（）；
//跟踪显示的弹出窗口
var displayedTooltips=新数组（）；
函数generateUniqueId（）
{
变量id；
做{
id=Math.floor（Math.random（）*90000）+10000；
}而（$.inArray（id，工具提示）！=-1）；
工具提示。推送（id）；
返回id；
}
函数getUniqueId（id）
{
返回parseInt（id.substr（0,5））；
}
函数isUniqueId（id）
{
return！NaN（getUniqueId（id））；
}
函数removeUniqueId（id）
{
var id=getUniqueId（id）；
var idIndex=$.inArray（id，工具提示）；
如果（idIndex！=-1）{
工具提示。拼接（idIndex）；
}
}
$.fn.displayTooltip=函数（）
{
var元素=$（此）；
var tooltip=$（“#”+element.attr（'data-tooltip-id'）；
var config=element.data（'config'）；
var offset=element.offset（）；
左var；
var-top；
开关（配置方向）{
案例“左”：
顶部=偏移量。顶部+像素；
left=offset.left-tooltip.outerWidth（）-config.offset+“px”；
打破
案例“顶部”：
top=offset.top-element.outerHeight（）-config.offset+“px”；
left=offset.left+（（element.outerWidth（）/2）-（tooltip.outerWidth（）/2））+“px”；
打破
案例“正确”：
顶部=偏移量。顶部+像素；
left=offset.left+element.outerWidth（）+config.offset+“px”；
打破
案例“底部”：
top=offset.top+element.outerHeight（）+config.offset+“px”；
left=offset.left+（（element.outerWidth（）/2）-（tooltip.outerWidth（）/2））+“px”；
打破
}
tooltip.css({
'位置'：'绝对'，
"左":左,，
"顶":顶,，
“z指数”：5000
});
if（element.isTooltipDisplayed（））{
返回；
}
tooltip.show（）；
displayedTooltips.push（element.attr（'id'））；
}
$.fn.hideTooltip=函数（）
{
var元素=$（此）；
var ididex=$.inArray（element.attr（'id'），displayedTooltips）；
如果（idIndex！=-1）{
显示ToolTips.拼接（idIndex）；
}
$（'#'+element.attr（'data-tooltip-id'））.hide（）；
}
$.fn.addTooltip=函数（内容，参数）
{
变量配置=$.extend（tooltipDefaults，参数）；
返回此值。每个（函数（）{
var元素=$（此）；
//如果元素已具有工具提示，请更改其中的内容
if（element.hasTooltip（））{
$（'#'+element.attr（'data-tooltip-id'））.html（内容）；
返回；
}
var tooltipId=（element.is（'[id]'）？element.attr（'id'）：generateUniqueId（））+'-tooltip'；
元素attr（'data-tooltip-id'，tooltipId）；
变量工具提示=$（''{
id:工具提示，
角色：“工具提示”，
类：config.class
}).html（内容）；
$（'body'）.append（工具提示）；
/**
*如果showOn和hideOn是相同的事件，则绑定一个切换
*listener-else绑定各个侦听器
*/
if（config.showOn==config.hideOn）{
on（config.showOn，function（））{
如果（！element.isTooltipDisplayed（））{
元素。displayTooltip（）；
}否则{
元素hideTooltip（）；
}
});
}否则{
on（config.showOn，function（））{
元素。displayTooltip（）；
}).on（config.hideOn，function（））{
元素hideTooltip（）；
});
}
//存储配置以供其他函数使用
element.data（'config'，config）；
//如果元素从上面运行的代码接收到焦点，则进行安全检查
元素hideTooltip（）；
});
}
$.fn.hasTooltip=函数（）
{
return$（this）.is（“[datatooltipid]”）；
}
$.fn.isTooltipDisplayed=函数（）
{
var元素=$（此）；
如果（！element.hasTooltip（））{
返回false；
}
返回（$.inArray（element.attr（'id'），displayedTooltips）=-1）？false:true；
}
$.fn.removeTooltip=函数（）
{
返回此值。每个（函数（）{
var元素=$（此）；
var tooltipId=element.attr（'data-tooltip-id'）；
var config=element.data（'config'）；
$（“#”+工具提示）.remove（）；
if（isUniqueId（tooltpId））{
removeUniqueId（工具提示）；
}
元素removeAttr（'data-tooltip-id'）；
if（config.showOn==config.hideOn）{
element.off（config.showOn）；
}否则{
element.off（config.showOn）；
element.off（config.hideOn）；
}
元素。removeData（'config'）；
});
}
//调整窗口大小时重新定位工具提示
$（窗口）.on（'resize'，function（））{
如果（显示ToolTips.length<1）{
返回；
}
对于（变量i=0；i

将配置声明放在每个lo中

return this.each(function() {
    var element = $(this);
    var config = $.extend(tooltipDefaults, params);
    ...

var defConfig = $.extend(tooltipDefaults, params);

return this.each(function() {
    var element = $(this);
    var config = $.extend({}, defConfig);

element.data('config', config);

 var config = $.extend(tooltipDefaults, params);

function TooltipDefaults() {
    this.class = null;
    this.showOn = 'mouseenter';
    this.hideOn = 'mouseleave';
    this.direction = 'top';
    this.offset = 0;
}

var config = new TooltipDefaults();
$.extend(config, params);