如何使两个工具提示ids独立关闭，记住cookie？ [英] How to make two tooltip ids independently close, and remember cookie?
问题描述
我想使用jQuery，使用HTML和CSS制作工具提示。
每个工具提示是不同的id和工作伟大的，所以我可以做尽可能多的工具提示，我想和独立的风格。
理解是如何使一个工具提示关闭，而不影响其他工具提示。
请注意＃tooltip2 在网站的不同位置出现几次（4），而＃tooltip1 只出现一次。如果我点击关闭＃tooltip2 我不想影响＃tooltip1 ，但关闭所有＃tooltip2 divs。
如果我点击关闭＃tooltip1 ，我想要它只关闭＃tooltip1 divs。 p>
以下是代码的一部分：
HTML：
< a href =javascript :; class =tooltipMe no-printid =tooltip1>< img src =images / icons / icon-tooltip-help.png/>< span class =tooltip-data>工具提示1文字< 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-printid =tooltip2>< img src =/ images / icons / icon-tooltip-help.png/>< span class =tooltip-data>工具提示2文字< 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 '）;
tooltip.find（'。btn-close'）。on（'click'，function（）{
var date = new Date（）;
date .setDate（date.getDate（）+ 1）;
//tooltip.removeClass('hover').off('mouseenter.tooltip'）; - 如果我们只想删除tooltip
/ /开始＃tooltip1
$（'。outerone> .btn-close'）。each（function（）{// #tooltip 1的代码 - 使用'each'
$ -masterone> .tooltipMe'）。hide（'fast'）; //选择隐藏什么和如何
document.cookie = tooltipId += true; path = /; expires = Th，20 Dec 1299 11:00:00 GMT;+ date.toUTCString（）;
function getCookie（name）{
var matches = document.cookie.match RegExp（（？：^ |;）+ name.replace（/（[\。$？* | {} \（\）\ [\] \\\ \\ ^}）/ g，'\\ $ 1'）+=（[^;] *）））;
return matches？decodeURIComponent（matches [1]）：undefined; RegExp
}
}）;
//＃tooltip1 end line
//开始＃tooltip2
$（'。outer> .btn-close'） .on（'click'，function（）{//＃foroltip 2的代码 - 使用'click'
$（'。tooltip-master> .tooltipMe'）。选择隐藏什么和如何
document.cookie = tooltipId += true; path = /; expires = Th，2099年12月31日11:00:00 GMT;+ date.toUTCString（）;
}）;
}）;
}）;
}
else {
tooltip.hide（）;
}
}）;
function getCookie（name）{
var matches = document.cookie.match（new RegExp（（？：^ |;）+ name.replace（/ $？* | {} \（\）\ [\] \\\ / \ + ^]）/ g，'\\ $ 1'）+= *）））;
返回匹配？ decodeURIComponent（matches [1]）：undefined; // cookie solution with RegExp
}}）（）;
如何使工具提示独立关闭？
我终于找到了答案，我发布只是因为我想为这个社区贡献。这可能不是很常见的请求，但我相信有些人会绊倒，我会很高兴知道它实际上帮助了某人。
（function（）{
$（'。tooltipMe'）。each（function（）{
var tooltip = $（this）;
var tooltipId = tooltip.attr 'id'）;
if（！getCookie（tooltipId））{
tooltip.on（'click.tooltipMe'，function（）{
tooltip.addClass '）;
tooltip.find（'。close-one> .btn-close'）。on（'click'，function（）{// exactatelly target .btn- close class
var date = new Date（）;
date.setDate（date.getDate（）+ 1）;
//tooltip.removeClass('hover').off('mouseenter.tooltip'） ; - 如果我们只想删除tooltip
//开始＃tooltip1
$（'。close-one> .btn-close'）。 #tooltip 1 - using'each'
$（'。tooltip-masterone>＃tooltip1'）。fadeOut（'slow'）; //选择隐藏什么和如何
document.cookie = tooltipId += true; path = /; expires = Th，2099年12月31日11:00:00 GMT; + date.toUTCString（）;
}）;
}）;
//＃tooltip1 end line
//开始＃tooltip2
tooltip.find（'。close-two> .btn-close'）。on '，function（）{// exactatelly target .btn-close class
var date = new Date（）;
date.setDate（date.getDate（）+ 1）;
$ '.close-two> .btn-close'）。each（function（）{//＃foroltip 2 - using'each'
$（'。tooltip-master>＃tooltip2'）。 fadeOut（'slow'）; //选择隐藏什么和如何
document.cookie = tooltipId += true; path = /; expires = Th，3099年12月31日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'）+= *）））;
返回匹配？ decodeURIComponent（matches [1]）：undefined; // Cookie解决方案与RegExp
}
所以解决方案很简单：你需要为每个类定义更多精确，所以它不会像以前一样关闭.btn-close，但它会在父类中关闭.btn-close。即。
$（'。class> .class。'）。
现在每个#tooltip独立关闭，你可以放置尽可能多的工具提示。我相信有更好的解决方案，如为每个.class> .class放一个变量，但这也很好。
干杯。 / p>
I'm trying to make a tooltip using jQuery, with HTML and CSS. Each tooltip is different by the id and that works great, so I can make as many tooltips as I want and style them independently.
What I lack to understand is how can I make a tooltip to close, without affecting other tooltip(s). I'm using Regex Exp for cookies and all tooltips are on the same page.
Please note that #tooltip2 appears several time (4) on different locations on website, while #tooltip1 appears only once. If I click close on #tooltip2 I don't want it to affect #tooltip1, but to close all #tooltip2 divs.
If I click close on #tooltip1, I want it only to close #tooltip1 divs.
Here is a part of code:
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
}})();
How can I make the tooltips close independently?
I have finally figured out the answer to this, and I'm posting only as I want to contribute to this community. This maybe not very common request, but I am sure some will stumble on it and I will be more than happy knowing that it actually helped someone.
(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
}
So the solution is pretty simple: you need to target each class more "precise", so it will not close ".btn-close" generally, like it did before, but it will close the exact ".btn-close" inside the parent class. ie.
$('.class > .class.').each(function(){});
Now each #tooltip is closed independently and you can put as many tooltips as you want. I'm sure there are better solutions to this, like placing a variable for each ".class > .class", but this works great as well.
Cheers.
这篇关于如何使两个工具提示ids独立关闭，记住cookie？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
