如何使两个工具提示ID独立关闭，并记住cookie？

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

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

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

这是代码的一部分：

HTML：

 Tooltip 1 Text Tooltip 2 Text 

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

如何使工具提示独立关闭？

Answer 1

我终于找到了答案，我只是发帖，因为我想为这个社区做出贡献。 这可能不是很常见的要求，但我相信有些人会偶然发现它，我会非常高兴知道这实际上对某人有所帮助。

 (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('.close-one > .btn-close').on('click', function(){ //accuratelly target .btn-close class 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 $('.close-one > .btn-close').each(function(){ //code for #tooltip 1 - using 'each' $('.tooltip-masterone > #tooltip1').fadeOut('slow'); //select what to hide and how document.cookie = tooltipId + "=true; path=/; expires=Th, 31 Dec 2099 11:00:00 GMT;" + date.toUTCString(); }); }); // #tooltip1 end line // Start of #tooltip2 tooltip.find('.close-two > .btn-close').on('click', function(){ //accuratelly target .btn-close class var date = new Date(); date.setDate(date.getDate() + 1); $('.close-two > .btn-close').each(function(){ //code for #tooltip 2 - using 'each' $('.tooltip-master > #tooltip2').fadeOut('slow'); //select what to hide and how document.cookie = tooltipId + "=true; path=/; expires=Th, 31 Dec 2099 11:00:00 GMT;" + date.toUTCString(); }); }); // tooltip2 end line }); } 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 } 

因此解决方案非常简单： 您需要将每个类更加“精确”定位，因此它不会像之前那样关闭“.btn-close”，但它会关闭内部的“.btn-close”。父类。 即。

 $('.class > .class.').each(function(){}); 

现在每个#tooltip都是独立关闭的，您可以根据需要添加任意数量的工具提示。 我确信有更好的解决方案，例如为每个“.class> .class”放置一个变量，但这也很好用。

干杯。