哇..获取关于'this'的真实信息不很容易,因为谷歌基本上忽略了这个词。
代码使用缩略图中的信息打开数据库中的图像.. onlick正常工作,悬停代码有效,但我无法弄清楚如何从mouseenter获取'this'以在showModal中使用功能
function showModal() {
$("body").css("overflow-y", "hidden");
$(".small").removeClass("smallHover");
$(".modal").fadeIn(200);
var altLong = $(this).attr("alt");
var altSplit = altLong.split("#");
$(".picTitle").text(altSplit[0]);
var srclong = $(this).attr("src");
var srcshort = srclong.split("_");
var srcextension = srclong.split(".");
$(".big").attr("src", srcshort[0]+'.'+srcextension[1]);
}
$(".small").click(showModal);
var timer;
$(".small").mouseenter(function() {
timer = setTimeout(function(){
$(this).showModal(); // **<--this is the line that doesnt work**
}, 2000);
}).mouseleave(function() {
clearTimeout(timer);
});
如果你能解释为什么你会使用$(this)作为jquery对象而不仅仅是'this'以及它们如何区别,那就太好了。提前谢谢〜!
答案 0 :(得分:3)
这有两个不同的方面。
在this
回调中获得正确的setTimeout
使用showModal
this
醇>
#1由this question's answers解决。你有几个选项,在这种情况下最简单的(现在)可能是使用变量:
$(".small").mouseenter(function() {
var _this = this; // ***
timer = setTimeout(function(){
$(_this).showModal(); // ***
}, 2000);
}).mouseleave(function() {
clearTimeout(timer);
});
...但该代码仍然无法正常工作,因为showModal
不是jQuery对象的属性,它是一个独立的函数。要使用特定this
进行调用,您可以使用Function.prototype.call
:
$(".small").mouseenter(function() {
var _this = this;
timer = setTimeout(function(){
showModal.call(_this); // ***
}, 2000);
}).mouseleave(function() {
clearTimeout(timer);
});
(或者,更改showModal
以接受元素作为参数,然后将其作为参数传递。)
有关this question's answers as well this
以及this (old) post on my anemic little blog的详情。
答案 1 :(得分:0)
如果您可以像这样更改showModel函数,这也会有效:
$.fn.showModal = function() {
$("body").css("overflow-y", "hidden");
$(".small").removeClass("smallHover");
$(".modal").fadeIn(200);
...
}
和里面的计时器方法
$(this).showModal();