如何在 jquery 的内部选择器回调函数中获取当前父选择器的实例

Question

我试图在单击".sbSelector"时将窗口向下滚动 200px，如果单击的元素(即".sbSelector")位于距窗口高度底部小于 200px。

$(document).on('click', '.sbSelector', function(){
var windowHeight = $(window).height();
var drpdwnOffsetTop = parseFloat($(this).offset().top - $(window).scrollTop());
if(parseFloat(windowHeight - drpdwnOffsetTop) < 200){
var temp = $(window).scrollTop() + 200;
$('html, body').animate({scrollTop: temp}, 500, function(){
**// How to get the instance of current '.sbSelector' here**
**// $(this) ll point to $(html,body), where as i need a reference to the current $('.sbSelector')**
});
}
});

我的查询是如何在 $('html，body').animate 函数回调中获取当前".sbSelector"的实例。因为文档中可能有很多".sbSelector"元素，我想指向动画回调中当前单击的".sbSelector"。

Answer 1

查看 JavaScript Scope 以获取有关全局变量的更多信息。

$(document).on('click', '.sbSelector', function(){
var windowHeight = $(window).height();
var drpdwnOffsetTop = parseFloat($(this).offset().top - $(window).scrollTop());
var that = $(this);
if(parseFloat(windowHeight - drpdwnOffsetTop) < 200){
var temp = $(window).scrollTop() + 200;
$('html, body').animate({scrollTop: temp}, 500, function(){
console.log(that);
});
}
});

或者，您可以将其绑定到浏览器对象模型：

$(document).on('click', '.sbSelector', function(){
var windowHeight = $(window).height();
var drpdwnOffsetTop = parseFloat($(this).offset().top - $(window).scrollTop());
window.that = $(this);
if(parseFloat(windowHeight - drpdwnOffsetTop) < 200){
var temp = $(window).scrollTop() + 200;
$('html, body').animate({scrollTop: temp}, 500, function(){
console.log(window.that);
});
}
});

注：在窗口对象上显式设置它时，请注意不要覆盖窗口对象的当前属性。此外，这在某些环境中不起作用，例如node.js.