Javascript 单击鼠标右键,在生成的标签元素上切换工具提示
我有一些动态生成的HTML:Javascript 单击鼠标右键,在生成的标签元素上切换工具提示,javascript,jquery,Javascript,Jquery,我有一些动态生成的HTML: <label class="passiveText smallText" title="Name: Smith, John , Occupation Code: BA81, Occupation Description: BUSINESS SYSTEMS M" rel="tooltip" style="margin-top:10px; width:80%; text-decoration:underline; color:#009245;" contain
<label class="passiveText smallText" title="Name: Smith, John , Occupation Code: BA81, Occupation
Description: BUSINESS SYSTEMS M" rel="tooltip" style="margin-top:10px; width:80%; text-decoration:underline;
color:#009245;" containeridx="0" id="lblBadge_7022_0">7022</label>
7022
现在我有了一个jQuery函数,单击该函数时会显示工具提示:
$( function()
{
var targets = $( '[rel~=tooltip]' ),
target = false,
tooltip = false,
title = false;
targets.bind( 'click', function()
{
target = $( this );
tip = target.attr('title');
tooltip = $( '<div id="tooltip"></div>' );
if( !tip || tip == '' )
return false;
tooltip.css( 'opacity', 0 )
.html( tip )
.appendTo( 'body' );
var init_tooltip = function()
{
if( $( window ).width() < tooltip.outerWidth() * 1.5 )
tooltip.css( 'max-width', $( window ).width() / 2 );
else
tooltip.css( 'max-width', 340 );
var pos_left = target.offset().left + ( target.outerWidth() / 2 ) - ( tooltip.outerWidth() / 2 ),
pos_top = target.offset().top - tooltip.outerHeight() - 20;
if( pos_left < 0 )
{
pos_left = target.offset().left + target.outerWidth() / 2 - 20;
tooltip.addClass( 'left' );
}
else
tooltip.removeClass( 'left' );
if( pos_left + tooltip.outerWidth() > $( window ).width() )
{
pos_left = target.offset().left - tooltip.outerWidth() + target.outerWidth() / 2 + 20;
tooltip.addClass( 'right' );
}
else
tooltip.removeClass( 'right' );
if( pos_top < 0 )
{
var pos_top = target.offset().top + target.outerHeight();
tooltip.addClass( 'top' );
}
else
tooltip.removeClass( 'top' );
tooltip.css( { left: pos_left, top: pos_top } )
.animate({ top: '+=10', opacity: 1 }, 50);
};
init_tooltip();
$( window ).resize( init_tooltip );
var remove_tooltip = function()
{
tooltip.animate( { top: '-=10', opacity: 0 }, 50, function()
{
$( this ).remove();
});
target.attr( 'title', tip );
};
//target.bind( 'mouseleave', remove_tooltip );
tooltip.bind( 'click', remove_tooltip );
});
$(函数()
{
变量目标=$(“[rel~=tooltip]”),
目标=错误,
工具提示=false,
标题=假;
targets.bind('click',function()
{
目标=$(本);
tip=target.attr('title');
工具提示=$('');
如果(!tip | | tip=='')
返回false;
css('opacity',0)
.html(提示)
.appendTo(‘body’);
var init_tooltip=函数()
{
如果($(窗口).width()$(窗口).width())
{
pos_left=target.offset().left-工具提示.outerWidth()+目标.outerWidth()/2+20;
addClass('right');
}
其他的
工具提示.removeClass('right');
如果(位置顶部<0)
{
var pos_top=target.offset().top+target.outerHeight();
addClass('top');
}
其他的
工具提示:removeClass('top');
css({left:pos_left,top:pos_top})
.animate({top:'+=10',不透明度:1},50);
};
初始化工具提示();
$(窗口)。调整大小(初始工具提示);
var remove_tooltip=函数()
{
动画({top:'-=10',不透明度:0},50,函数()
{
$(this.remove();
});
target.attr('title',tip);
};
//绑定('mouseleave',删除工具提示);
绑定('单击',删除工具提示);
});
}))
它没有做的是像我想的那样切换。我想要的是当工具提示打开,并且再次单击时,我希望工具提示消失
我如何才能做到这一点?这是我想出的解决方案:
$(function () {
var targets = $('[rel~=tooltip]');
targets.on('click', function () {
var $this = $(this);
var tooltip = $this.children('#tooltip');
if (tooltip.length > 0) {
tooltip.remove();
return true;
}
tooltip = $('<div id="tooltip">');
tooltip.text($this.attr('title'));
var init_tooltip = function () {
if ($(window).width() < tooltip.outerWidth() * 1.5)
tooltip.css('max-width', $(window).width() / 2);
else
tooltip.css('max-width', 340);
var pos_left = $this.offset().left + ($this.outerWidth() / 2) - (tooltip.outerWidth() / 2),
pos_top = $this.offset().top - tooltip.outerHeight() - 20;
if (pos_left < 0) {
pos_left = $this.offset().left + $this.outerWidth() / 2 - 20;
tooltip.addClass('left');
}
else
tooltip.removeClass('left');
if (pos_left + tooltip.outerWidth() > $(window).width()) {
pos_left = $this.offset().left - tooltip.outerWidth() + $this.outerWidth() / 2 + 20;
tooltip.addClass('right');
}
else
tooltip.removeClass('right');
if (pos_top < 0) {
var pos_top = $this.offset().top + $this.outerHeight();
tooltip.addClass('top');
}
else
tooltip.removeClass('top');
tooltip.css({ left: pos_left, top: pos_top })
.animate({ top: '+=10', opacity: 1 }, 50);
}
init_tooltip();
$(window).resize(init_tooltip);
$this.append(tooltip);
});
});
$(函数(){
变量目标=$(“[rel~=tooltip]”);
目标。在('单击',函数()上){
var$this=$(this);
var tooltip=$this.children(“#tooltip”);
如果(tooltip.length>0){
工具提示。删除();
返回true;
}
工具提示=$('');
tooltip.text($this.attr('title'));
var init_tooltip=函数(){
如果($(窗口).width()$(窗口).width()){
pos_left=$this.offset().left-tooltip.outerWidth()+$this.outerWidth()/2+20;
tooltip.addClass('right');
}
其他的
工具提示.removeClass('right');
如果(位置顶部<0){
var pos_top=$this.offset().top+$this.outerHeight();
工具提示.addClass('top');
}
其他的
工具提示。removeClass(“顶部”);
css({left:pos_left,top:pos_top})
.animate({top:'+=10',不透明度:1},50);
}
初始化工具提示();
$(窗口)。调整大小(初始工具提示);
$this.append(工具提示);
});
});
您可能希望使用.on()
将父对象上的单击处理委托给选择器。通过这种方式,您不需要解除绑定,因为稍后添加的项目也将被委派。您可以为此创建一个提琴吗?看起来您的代码可以按原样工作:什么似乎不起作用?感谢您制作提琴Brent。不起作用的是,单击时工具提示会出现,但再次单击时工具提示不会消失。