我尝试使用带有HTML和CSS的jQuery制作工具提示。 每个工具提示都因id而异，并且效果很好，因此我可以根据需要制作多个工具提示并单独设置它们。
我缺乏理解的是如何在不影响其他工具提示的情况下关闭工具提示。我使用Regex Exp作为cookie，所有工具提示都在同一页面上。
请注意，#tooltip1在网站上的不同位置出现了几次（4），而#tooltip2只出现一次。如果我点击#tooltip1上的关闭，我不希望它影响#tooltip2，但要关闭所有#tooltip1 div。
如果我点击#tooltip1上的关闭，我希望它只关闭<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>
div。
以下是代码的一部分：
HTML：
(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
}})();
的jQuery
<body ng-app="myApp" ng-controller="MainCtrl">
<form enctype="multipart/form-data" id="FileUploadForm" name="FileUpload" ng-submit="submitData(FileUpload)" novalidate>
<div style="text-align: left;font-size: 20px;padding: 10px;color: #487eaa;">
<font> Upload Resume</font>
</div>
<div class="file-upload">
<input type="text" id="name" name="name" ng-model="name" />
<br /><br />
<input type="text" id="place" name="place" ng-model="place" />
<br /><br />
<label class="control-label" for="Dilation" style="padding:3px 0;">Dilation</label>
<label>Yes <input type="radio" name="dilation" id="dilation" ng-model="dilation" value="Yes" ng-checked="false" /></label>
<label>No <input type="radio" name="dilation" id="dilation" ng-model="dilation" value="No" ng-checked="false" /></label>
<br /><br />
<label class="control-label" for="NCT" style="padding:3px 0;">NCT</label>
<label>Right <input type="radio" name="nct" id="nct" ng-model="nct" value="Right" ng-checked="false" /></label>
<label>Left <input type="radio" name="nct" id="nct" ng-model="nct" value="Left" ng-checked="false" /></label>
<br /><br />
<input type="file" id="i_file" name="file" ng-file-select="onFileSelect($files)" multiple />
<br /><br />
<input type="submit" id="submit" name="submit" value="submit" ng-disabled="FileUploadForm.$invalid" />
<br /><br />
<div ng-bind="dilation" ng-hide="dilation"></div>
<div ng-bind="nct" ng-hide="nct"></div>
</div>
</form>
</body>
如何让工具提示独立关闭？
答案 0 :(得分：0)
我终于找到了答案，我只是发帖，因为我想为这个社区做出贡献。这可能不是很常见的请求，但我相信有些人会偶然发现它，我会非常高兴知道这实际上对某人有所帮助。
(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
}
所以解决方案很简单：你需要更多地针对每个班级＆＃34;精确＆＃34;，所以它不会关闭＆＃34; .btn-close＆＃34;一般来说，就像之前一样，但它会关闭确切的＆＃34; .btn-close＆＃34;在父类中。即。
$('.class > .class.').each(function(){});
现在每个#tooltip都是独立关闭的，您可以根据需要添加任意数量的工具提示。我确信有更好的解决方案，例如为每个＆＃34; .class＆gt;放置一个变量。 .class＆＃34;，但这也很有用。
干杯。