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

How to make two tooltip ids independently close, and remember cookie?

本文关键字：cookie 何使两 工具提示 id 独立      更新时间：2023-09-26

我正在尝试使用jQuery, HTML和CSS制作工具提示。每个工具提示都有不同的id，这很好，所以我可以制作尽可能多的工具提示，并独立地设置它们的样式。

我不明白的是如何使一个工具提示关闭，而不影响其他工具提示。我使用正则表达式的cookie和所有的工具提示都在同一页。

请注意，#tooltip2在网站的不同位置出现了多次(4)，而#tooltip1只出现了一次。如果我点击关闭#tooltip2，我不希望它影响#tooltip1，但关闭所有#tooltip2div。如果我点击关闭#tooltip1，我希望它只关闭#tooltip1div。

下面是一段代码:

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

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

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

(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 "在父类中。 ie。

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

现在每个#工具提示都是独立关闭的，你可以随心所欲地放置许多工具提示。我相信有更好的解决方案，比如为每个"。class>。class"放置一个变量，但这也很有效。

欢呼。

相关文章：