Question

一旦我开始使用scroll（）函数，它就完全停止了工作。我正试图在视图中使$元素淡入。我对编码很陌生，我花了好几个小时试图自己解决这个问题。

＆＃13;

$(document).ready(function() {
    $('.fa.fa-caret-square-o-down').addClass('load');
    $(window).scroll(function() {
        function get_window_position() {
            var $window = $(window);
            var window_top_position = $window.scrollTop();
            var window_height = $window.height();
            var window_bottom = (window_top_position + window_height);
            var $element = $('.element');
            var element_top = $element.offset().top;
            var element_height = $element.height();
            var element_bottom = (element_top + element_height);
            $element.each(get_window_position) {

                if ((window_bottom > element_top) && (window_top_position < element_bottom)) {
                    $('.element').addClass('load');
                } else {
                    $('.element') removeClass('load');
                };
            };
        };

    });

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

Answer 1

定义这样的函数时：

function doStuff() {
  ...
}

在您使用doStuff()调用该函数之前，其中的代码实际上不会运行。此外，jQuery的each函数将回调函数作为参数。您传递回调函数，然后似乎也定义了另一个语法不正确的函数。你可以做类似的事情 $element.each(function(){...});或$element.each(myCallbackFunction);

此处提供更多信息：https://api.jquery.com/each

Answer 2

您的代码存在多个问题。（首先，您没有显示完整/相关的HTML，因此如果您只有一个.element或多个，则不清楚。我假设您有多个。）

一旦定义了匿名函数（通常），就不需要在其中定义另一个函数。
您使用.each的方式很奇怪（当然也不正确），这就是您收到错误missing semicolon的原因。
当您使用$element获取top之外的height，.each等时，您将获得第一个.element的值。这可能不是你想要的。

以下是应该提供帮助的更新代码。

$(document).ready(function() {
    $('.fa.fa-caret-square-o-down').addClass('load');
    $(window).scroll(function() {
        
        var $window = $(window);
        var window_top_position = $window.scrollTop();
        var window_height = $window.height();
        var window_bottom = (window_top_position + window_height);
        
        $('.element').each(function() {
          var $element = $(this);
          var element_top = $element.offset().top;
          var element_height = $element.height();
          var element_bottom = (element_top + element_height);

          if ((window_bottom > element_top) && (window_top_position < element_bottom)) {
            $element.addClass('load');
          } else {
            $element.removeClass('load');
          };
        });

    });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

为什么我的Jquery不在第三行之后工作

2 个答案: