Question

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

我正在尝试使用jQuery，HTML和CSS制作工具提示。每个工具提示都因id而异，并且效果很好，因此我可以根据需要制作多个工具提示并单独设置它们。

我缺乏理解的是如何在不影响其他工具提示的情况下关闭工具提示。我正在使用Regex Exp for cookies，所有工具提示都在同一页面上。

请注意，#tooltip2在网站上的不同位置出现了几次（4），而#tooltip1只出现一次。如果我点击#tooltip2上的关闭，我不希望它影响#tooltip1，而是关闭所有#tooltip2 div。如果我点击#tooltip1上的关闭，我希望它只关闭＃tooltip1 divs。

以下是代码的一部分：

HTML：

<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>

的jQuery

(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
}})();

这一切都很完美，但我不知道如何独立完成。 Tooltip2关闭tooltip1，之后关闭，而如果先点击，tooltip1工作正常。

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

0 个答案: