我想通过调用名为mouseenter的新函数来清理工具提示插件的showKeyTip部分。 （这也使我能够在mouseenter中使用if语句来控制悬停）
我从setTimeout处理mouseleave的方式得到了一个想法，但出于某种原因，类似的调用在mouseenter中无效...
我觉得我错过了一些东西，或者不完全理解$(this)与事物的关系。
任何意见/建议都表示赞赏。
// [ hide ]
function hideKeyTip(){
timer = setTimeout(function(){
keyTip.stop().fadeOut(faderate)}, timeout);
}
// [ control ]
return this.each(function(){
$(this)
.on("mouseenter", function(){
clearTimeout(timer);
// dimensions
var targetH = $(this).height()/2,
targetW = $(this).width();
// position
var top = $(this).offset().top - targetH + padtop,
left = $(this).offset().left + targetW + padleft;
// apply css & show
keyTip.css({
'top': top,
'left': left
}).show();
})// mouseenter
.on("mouseleave", function(){
hideKeyTip();
});// mouseleave
});// return this
我将mouseenter的内容移动到名为showKeyTip的新函数中，并在mouseenter中调用它。
// [ hide ]
function hideKeyTip(){
timer = setTimeout(function(){
keyTip.stop().fadeOut(faderate)}, timeout);
}
// [ show ]
function showKeyTip(){
clearTimeout(timer);
// dimensions
var targetH = $(this).height()/2,
targetW = $(this).width();
// position
var top = $(this).offset().top - targetH + padtop,
left = $(this).offset().left + targetW + padleft;
// apply css settings & show
keyTip.css({
'top': top,
'left': left
}).show();
}
// [ control ]
return this.each(function(){
$(this)
.on("mouseenter", function(){
showKeyTip();
})// mouseenter
.on("mouseleave", function(){
hideKeyTip();
});// mouseleave
});// return this
使用 adeneo 建议，这个难题最后一块......
在工具提示的悬停或鼠标中心/上方滚动测试用例的最佳方法是什么？
如果被盘旋，我想继续显示工具提示。
我目前的立场是向hideKeyTip函数添加一个if语句，但工具提示会在显示时挂起，并且在鼠标离开时不会淡出。
// [ hide ]
function hideKeyTip(){
if(!keyTip.hover()){
timer = setTimeout(function(){
keyTip.stop().fadeOut(faderate)}, timeout);
}
}
// [ show ]
function showKeyTip(){
clearTimeout(timer);
// dimensions
var targetH = $(this).height()/2,
targetW = $(this).width();
// position
var top = $(this).offset().top - targetH + padtop,
left = $(this).offset().left + targetW + padleft;
// apply css settings & show
keyTip.css({
'top': top,
'left': left
}).show();
}
// [ control ]
return this.on({
mouseenter: showKeyTip,
mouseleave: hideKeyTip
});// return this
当用户将鼠标悬停在实际工具提示上时，尝试重复使用隐藏和显示功能来显示工具提示。 （当工具提示中存在链接时很有用。）
有什么建议吗？我究竟做错了什么？感谢...
// [ hide ]
function hideKeyTip(){
timer = setTimeout(function(){
keyTip.stop().fadeOut(faderate)}, timeout);
}
// [ show ]
function showKeyTip(){
clearTimeout(timer);
// dimensions
var targetH = $(this).height()/2,
targetW = $(this).width();
// position
var top = $(this).offset().top - targetH + padtop,
left = $(this).offset().left + targetW + padleft;
// apply css settings & show
keyTip.css({
'top': top,
'left': left
}).show();
}
// [ control ]
return this.on({
mouseenter: showKeyTip,
mouseleave: hideKeyTip
});
return keyTip.on({
// note: keyTip = $(settings.tooltip);
mouseenter: function(){
clearTimout(timer);
},
mouseleave: hideKeyTip
});
在codepen中经过一些试验和错误后，我认为我已经找到了一个很好的解决方案，可以在用户的鼠标光标悬停在工具提示上时显示工具提示。我也是从错误的角度接近问题...是返回keyTip.on（）声明甚至合法吗？
所以这就是我想出的。如果你能指出这种方法的任何负面影响，请告诉我。
当我清理它时，我会在下面的评论中发布codepen。
感谢 adeneo 为我指明正确的方向。
// [ hide ]
function hideKeyTip(){
// note: keyTip = $(settings.tooltip);
keyTip.on({
mouseenter: function(){
//you have arrived
},
mouseleave: function(){
timer = setTimeout(function(){
keyTip.stop().fadeOut(faderate)}, timeout);
};
});
}
// [ show ]
function showKeyTip(){
clearTimeout(timer);
// dimensions
var targetH = $(this).height()/2,
targetW = $(this).width();
// position
var top = $(this).offset().top - targetH + padtop,
left = $(this).offset().left + targetW + padleft;
// apply css settings & show
keyTip.css({
'top': top,
'left': left
}).show();
}
// [ control ]
return this.on({
mouseenter: showKeyTip,
mouseleave: hideKeyTip
});
答案 0 :(得分：1)
在窗口范围内调用函数时，窗口显然是this的值
您需要引用这些函数，而不是在其他匿名函数中调用它们，以保持this的值为元素。
return this.on({
mouseenter : showKeyTip,
mouseleave : hideKeyTip,
});
请注意，如果你正在做的就是在集合上调用each，你可以放弃on调用，因为jQuery会在其中进行迭代。
答案 1 :(得分：0)
更正代码的最简单方法是将this作为参数传递给showKeyTip函数。
电话会是
showKeyTip(this);
功能声明
function showKeyTip(t){
.....
var targetH = $(t).height()/2,
.....
}