jQuery插件回調$這不能返回元素

Question

我正在學習編寫一個迷你jQuery插件工具。

我的插件幫助用戶檢查用戶是否鼠標滾輪向上或向下滾動觸發回調函數。

我有四個div的，當我的鼠標指針懸停它與鼠標滾輪向上滾動，插件回調將改變這個div的背景色。

不幸的是，我的回調的$這是行不通的指向這個元素。 我需要一些幫助。

風格

body {background: #2A2B30;} 
    .wrapper {margin-top: 100px;} 
    .wrapper div.content {border-radius: 7px; border: 1px solid #000; min-height: 300px; margin-top: 30px; background: #ededed; padding: 30px; font-size: 20px;} 

的Html

<div class="container"> 
    <div class="wrapper clearfix"> 
     <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 content-wrapper"> 
      <div class="blk content"> </div> 
     </div> 
     <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 content-wrapper"> 
      <div class=" content"> </div> 
     </div> 
     <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 content-wrapper"> 
      <div class="blk content"> </div> 
     </div> 
     <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 content-wrapper"> 
      <div class=" content"> </div> 
     </div> 
    </div> 
</div> 

調用插件

$(function() { 
    $('.blk').scroll({ 
     lastAnimation : 0, 
     quietPeriod  : 500, 
     animationTime : 800, 
     ScrollUp : function() { 
      $(this).css('background', 'red'); 
     }, 
     ScrollDown : function() { 
      alert('Scroll Down'); 
     } 
    }); 
}); 

我的插件

(function($) { 
$.fn.scroll = function(options) { 

    var settings = $.extend({ 
     // selector   : $(this), 
     lastAnimation : null, 
     quietPeriod  : null, 
     animationTime : null, 
     ScrollUp   : null, 
     ScrollDown  : null 
    }, options); 

    return this.each(function() { 
     var lastAnimation = settings.lastAnimation; 
     var quietPeriod = settings.quietPeriod; 
     var animationTime = settings.animationTime; 

     function init(event, delta) { 
      deltaOfInterest = delta; 
      var timeNow = new Date().getTime(); 
      if(timeNow - lastAnimation < quietPeriod + animationTime) { 
       event.preventDefault(); 
       return; 
      } 

      if (deltaOfInterest < 0) { 
       // Call Back 
       if ($.isFunction(settings.ScrollUp)) { 
        settings.ScrollUp.call(this); 
       } 
      } else { 
       // Call Back 
       if ($.isFunction(settings.ScrollDown)) { 
        settings.ScrollDown.call(this); 
       } 
      } 

      lastAnimation = timeNow; 
     } 

     $(this).bind('mousewheel DOMMouseScroll', function(event) { 
      event.preventDefault(); 
      var delta = event.originalEvent.wheelDelta || -event.originalEvent.detail; 
      init(event, delta); 
     }); 

     }); 
     } 
     }(jQuery)); 

Answer 1

這是因爲settings.ScrollUp.call(this);這裏this是不是指的div其內部功能，因此this是成爲init內部函數裏面試試這個別的東西： -

return this.each(function() { 
    var $this=this; // create variable here 
     ..... 
     ..... 
    settings.ScrollUp.call($this); //use it here like this in init function 

Demo

Answer 2

看看這是否有幫助。

使用jQuery .hover（）來存儲該div的鼠標已經結束。
然後，只需使用該變量（VAR hoverDiv），而不是「本」

<style> 
    body {background: #2A2B30;} 
    .wrapper {margin-top: 100px;} 
    .wrapper div.content {border-radius: 7px; border: 1px solid #000; min-height: 120px; margin-top: 30px; background: #ededed; padding: 30px; font-size: 20px;} 
</style> 
    <div class="container"> 
    <div class="wrapper clearfix"> 
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 content-wrapper"> 
     <div class="blk content"> </div> 
    </div> 
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 content-wrapper"> 
     <div class=" content"> </div> 
    </div> 
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 content-wrapper"> 
     <div class="blk content"> </div> 
    </div> 
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 content-wrapper"> 
     <div class=" content"> </div> 
    </div> 
    </div> 
</div> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script> 
/* 
@see http://stackoverflow.com/questions/31340479/jquery-plugin-callback-this-cant-return-element 
*/ 
(function($) { 
    $.fn.scroll = function(options) { 
    var settings = $.extend({ 
     // selector  : $(this), 
     lastAnimation : null, 
     quietPeriod : null, 
     animationTime : null, 
     ScrollUp  : null, 
     ScrollDown  : null 
    }, options); 
    return this.each(function() { 
     var lastAnimation = settings.lastAnimation; 
     var quietPeriod = settings.quietPeriod; 
     var animationTime = settings.animationTime; 
     function init(event, delta) { 
     deltaOfInterest = delta; 
     var timeNow = new Date().getTime(); 
     if(timeNow - lastAnimation < quietPeriod + animationTime) { 
      event.preventDefault(); 
      return; 
     } 
     if (deltaOfInterest < 0) { 
      // Call Back 
      if ($.isFunction(settings.ScrollUp)) { 
      settings.ScrollUp.call(this); 
      } 
     } else { 
      // Call Back 
      if ($.isFunction(settings.ScrollDown)) { 
      settings.ScrollDown.call(this); 
      } 
     } 
     lastAnimation = timeNow; 
     } 
     $(this).bind('mousewheel DOMMouseScroll', function(event) { 
     event.preventDefault(); 
     var delta = event.originalEvent.wheelDelta || -event.originalEvent.detail; 
     init(event, delta); 
     }); 
    }); 
    } 
}(jQuery)); 

$(function() { 
    var hoverDiv = null; 
    $('.blk').hover(function(e) { 
     hoverDiv = $(this); 
    }, 
    function(e) { 
     hoverDiv = null; 
    } 
); 
    $('.blk').scroll({ 
    lastAnimation : 0, 
    quietPeriod : 500, 
    animationTime : 800, 
    ScrollUp : function() { 
     if(hoverDiv) { 
     hoverDiv.css('background', 'red'); 
     } 
    }, 
    ScrollDown : function() { 
     if(hoverDiv) { 
     hoverDiv.css('background', 'blue'); 
     } 
    } 
    }); 
}); 
</script>