javascript - 将 DOM 元素传递给 jQuery 自定义插件

Question

我在将 DOM 元素传递给自定义插件中的函数时遇到问题。正如您所看到的，我在 $(window).scroll(); 函数中调用了 eHeight(this); ，但收到了此错误:

Uncaught TypeError: Cannot read property 'attr' of undefined

然后我将 this 更改为 eHeight(elem);，这次我收到此错误:

Uncaught ReferenceError: elem is not defined

如何将所选元素传递给 eHeight()？

 (function($) {
      $.fn.boxHeight = function(options) {
    
        var settings = $.extend({
          elemHeight: null
        }, options);
        
    
        var start = 0;
        $(window).scroll(function(event) {
          var st = $(this).scrollTop();
          if (st > start) {
            eHeight(this);
          } 
          start = st;
        });
    
        function eHeight() {
          var elem = $.trim(elem.attr('id'));
          elem = "#" + elem;
          var theHeight = $(elem).height();
            if ($.isFunction(options.elemHeight)) {
                  options.elemHeight.call();
             }
             options.elemHeight.call();
        }
     
      };
    })(jQuery);
    
    $('#c').boxHeight({
      elemHeight: function() {
        $('#result').html('The Height is: ');
      }
    });

div {
  height: 600px;
  width: 100%;
}

#c {
  background-color: khaki;
}

#result {
  position: fixed;
  right: 0;
  top: 0;
  background: yellow;
  height: 40px;
  width: 220px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='a'>A</div>
<div id='b'>B</div>
<div id='c'>C</div>
<div id='d'>D</div>
<div id='e'>E</div>
<div id='f'>F</div>
<div id='result'></div>

Answer 1

在插件中定义一个引用 this 元素的变量，以及 elemHeight 处预期的参数，将引用传递给 elemHeight。 $.trim() 和 call .call() 调用不是必需的

(function($) {
  $.fn.boxHeight = function(options) {
    var elem = this;
    var settings = $.extend({
      elemHeight: null
    }, options);


    var start = 0;
    $(window).scroll(function(event) {
      var st = $(this).scrollTop();
      if (st > start) {
        eHeight(elem);
      }
      start = st;
    });

    function eHeight(elem) {
      var theHeight = elem.height();
      if ($.isFunction(options.elemHeight)) {
        options.elemHeight(theHeight);
      }
    }

  };
})(jQuery);

$('#c').boxHeight({
  elemHeight: function(theHeight) {
    $('#result').html('The Height is: ' + theHeight);
  }
});

div {
  height: 600px;
  width: 100%;
}

#c {
  background-color: khaki;
}

#result {
  position: fixed;
  right: 0;
  top: 0;
  background: yellow;
  height: 40px;
  width: 220px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='a'>A</div>
<div id='b'>B</div>
<div id='c'>C</div>
<div id='d'>D</div>
<div id='e'>E</div>
<div id='f'>F</div>
<div id='result'></div>