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

Question

如果单击的元素(即“.sbSelector”)距离窗口高度底部小于 200 像素，我尝试在单击“.sbSelector”时将窗口向下滚动 200 像素。

$(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);
         });
     }
 });

或者，您可以将其绑定(bind)到 Browser Object Model :

$(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)中不起作用。