当用户滚动到元素时，可重用函数将类添加到元素中。

Question

我需要创建一个函数，以便在用户滚动到元素时将类添加到元素中。我知道让它工作的基本思想，但我无法工作的是创建函数，并以某种方式将其绑定到不同的元素。

下面是我现在的代码：

$(document).ready(function(){
    $.fn.showIcon = function() {
       var $elID =  this;
       $(window).scroll(function() {
          var height = $(window).height() / 1.25;
          var offset = elID.offset().top - height;
          if ($(window).scrollTop() >= offset) {
            $(this).find(".img-responsive").addClass('show');
          }
        });
      }
    $('#icon-1').showIcon();
    $('#icon-2').showIcon();
    $('#icon-3').showIcon();
});

我得到的错误告诉我，elID没有定义，因此函数开头的"this“部分显然不理解我所针对的元素。

这是我所拥有的最新版本，但是我尝试了很多不同的方法来锁定元素的ID，而没有运气。

所以我要做的是，当用户滚动到#item-1、#item-2或#item-3时，就会触发函数showIcon()。

任何帮助都是感激的，谢谢！

/

下面是一个删除$elID变量的更新，但它似乎是$(this)部分，它不想针对我试图获取的元素。我不知道如何得到应用函数的元素。

$(document).ready(function(){
    $.fn.showIcon = function() {

       $(window).scroll(function() {
          var height = $(window).height() / 1.25;
          var offset = $(this).offset().top - height;
          if ($(window).scrollTop() >= offset) {
            $(this).find(".img-responsive").addClass('show');
          }
        });
      }
    $('#icon-1').showIcon();
    $('#icon-2').showIcon();
    $('#icon-3').showIcon();
});

Answer 1

您对上下文有一个问题- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

$(document).ready(function(){
  $.fn.showIcon = function() {

   // this here is a jquery object
   var $element =  this; 

   $(window).scroll(function() {

      // this here is the window object
      var $window = $(this);

      var windowHeight = $window.height() / 1.25;
      var offset = $element.offset().top - windowHeight;
      if ($window.scrollTop() >= offset) {
        $element.find(".img-responsive").addClass('show');
      }
    });
  }

  $('#icon-1').showIcon();
  $('#icon-2').showIcon();
  $('#icon-3').showIcon();
});

http://jsfiddle.net/P2ptx/