javascript - 如何让两个tooltip id独立关闭，并记住cookie？

Question

我正在尝试使用 jQuery、HTML 和 CSS 制作工具提示。 每个工具提示因 ID 不同而效果很好，因此我可以制作任意数量的工具提示并独立设置样式。

我不明白的是如何在不影响其他工具提示的情况下关闭工具提示。我对 Cookie 使用 Regex Exp，所有工具提示都在同一页面上。

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

部分代码如下:

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

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

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”放置一个变量，但这也很有效。

干杯。