J'apprends à écrire un mini jQuery Plugin Tools.

Mon plugin aide l'utilisateur à vérifier si la molette de la souris de l'utilisateur fait défiler vers le haut ou vers le bas pour déclencher la fonction de rappel.

J'ai quatre divs, quand le pointeur de ma souris le survole et fait défiler la molette de la souris, le rappel du plugin changera la couleur d'arrière-plan de cette div.

Malheureusement, le $ this de mon rappel ne fonctionne pas pour pointer cet élément. Je ai besoin d'aide.

Style

    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>

Plug-in d'appel

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

Mon plugin

(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));
1
tommychoo 10 juil. 2015 à 15:11

2 réponses

Meilleure réponse

C'est parce que settings.ScrollUp.call(this); ici this ne fait pas référence à div sa fonction interne donc this devient quelque chose d'autre à l'intérieur de la fonction interne init essayez ceci: -

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

Démo

4
Mohit Kumar 10 juil. 2015 à 12:39

Voyez si cela aide.

J'utilise jQuery .hover () pour stocker sur quel div la souris se trouve.
Ensuite, utilisez simplement cette variable (var hoverDiv) au lieu de "this"

<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>
0
Emmanuel Delay 10 juil. 2015 à 12:41