Javascript 如何让两个ID记住cookie并独立关闭？

我在很多地方都试过，但不是在这里

我正在尝试使用jQuery、HTML和CSS制作工具提示。每个工具提示的id都不同，效果很好，因此我可以根据需要制作任意多的工具提示，并独立设置它们的样式

我不明白的是，如何在不影响其他工具提示的情况下关闭工具提示。我正在使用正则表达式进行cookies，所有工具提示都在同一页上

请注意，

#tooltip2

在网站的不同位置出现多次（4），而

#tooltip1

只出现一次。如果我单击关闭

#tooltip2

，我不希望它影响

#tooltip1

，而是关闭所有

#tooltip2

div。如果我单击关闭

#tooltip1

，我只希望它关闭#tooltip1 divs

以下是代码的一部分：

HTML:

---

这一切都很完美，但我不知道如何独立地关闭它。Tooltip2关闭tooltip1，然后关闭，而tooltip1如果先单击可以正常工作。

您是否知道有一个名为“title”的全局HTML属性可用于显示工具提示？为什么getCookie（name）定义了两次？我想每次都需要获取“cookie”请注意，文档中具有多个相同id的元素是无效的。请使用类对元素进行分类，而不是id。谢谢dsh。。你能告诉我这段代码的解决方案吗，我对jQuery没有太多经验？你知道有一个叫做“title”的全局HTML属性可以用来显示工具提示吗？为什么getCookie（name）定义了两次？我想每次我都需要获取“cookie”请注意，文档中具有多个相同id的元素是无效的。请使用类对元素进行分类，而不是id。谢谢dsh。。你能告诉我这段代码的解决方案吗？我对jQuery没有太多经验？

<a href="javascript:;" class="tooltipMe no-print" id="tooltip1"><img src="images/icons/icon-tooltip-help.png" /><span class="tooltip-data">Tooltip 1 Text<span class="outerone"><span class="btn-close"><img src="http:/images/icons/icon-tooltip-close.png"  /></span></span></span></a></span>

 <span class="tooltip-master"><a href="javascript:;" class="tooltipMe no-print" id="tooltip2"><img src="/images/icons/icon-tooltip-help.png" /><span class="tooltip-data">Tooltip 2 Text<span class="outer"><span class="btn-close"><img src="images/icons/icon-tooltip-close.png"  /></span></span></span></a>

(function(){
$('.tooltipMe').each(function(){
    var tooltip = $(this);
    var tooltipId = tooltip.attr('id');

    if( !getCookie(tooltipId) ) {
        tooltip.on('click.tooltipMe', function(){
            tooltip.addClass('hover');

            tooltip.find('.btn-close').on('click', function(){
                var date = new Date();
                date.setDate(date.getDate() + 1);
              //tooltip.removeClass('hover').off('mouseenter.tooltip'); - in case we want to remove only tooltip
              // Start of #tooltip1
                $('.outerone > .btn-close').each(function(){ //code for #tooltip 1 - using 'each'
                    $('.tooltip-masterone > .tooltipMe').hide('fast'); //select what to hide and how
                document.cookie = tooltipId + "=true; path=/; expires=Th, 31 Dec 2099 11:00:00 GMT;" + date.toUTCString();

                 function getCookie(name) {
    var matches = document.cookie.match(new RegExp("(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"));
    return matches ? decodeURIComponent(matches[1]) : undefined; // cookie solution with RegExp
}
                });
              // #tooltip1 end line
              // Start of #tooltip2
                $('.outer > .btn-close').on('click', function(){ //code for #tooltip 2 - using 'click'
                    $('.tooltip-master > .tooltipMe').hide('fast'); //select what to hide and how

                document.cookie = tooltipId + "=true; path=/; expires=Th, 31 Dec 2099 11:00:00 GMT;" + date.toUTCString();

                });
            });
        });
    }
    else {
      tooltip.hide();
    }
});

function getCookie(name) {
    var matches = document.cookie.match(new RegExp("(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"));
    return matches ? decodeURIComponent(matches[1]) : undefined; // cookie solution with RegExp
}})();