javascript - 如何将函数应用于选定的元素，将 Jquery 代码转换为 JS 并获取类型错误

Question

我正在尝试将 Jquery 函数更改为普通 JS，但在复制它时遇到问题。我已经修复了它引发的一些错误，但现在我完全陷入困境。

Jquery 代码

jQuery(window).load(function () {
    var windowHeight, windowScrollPosTop, windowScrollPosBottom = 0;

    function calcScrollValues() {
        windowHeight = jQuery(window).height();
        windowScrollPosTop = jQuery(window).scrollTop();
        windowScrollPosBottom = windowHeight + windowScrollPosTop;
    }

    jQuery.fn.revealOnScroll = function (direction, speed) {
        return this.each(function () {

            var objectOffset = jQuery(this).offset();
            var objectOffsetTop = objectOffset.top;

            if (!jQuery(this).hasClass("hidden")) {

                // if argument is "right"
                if (direction == "right") {
                    jQuery(this).css({
                        "opacity": 0,
                        "right": "700px",
                        "position": "relative"
                    });
                    // if argument is "left"
                } else {
                    jQuery(this).css({
                        "opacity": 0,
                        "right": "-700px",
                        "position": "relative"
                    });

                }
                jQuery(this).addClass("hidden");
            }
            if (!jQuery(this).hasClass("animation-complete")) {

                // if the page has been scrolled far enough to reveal the element
                if (windowScrollPosBottom > objectOffsetTop) {
                    jQuery(this).animate({"opacity": 1, "right": 0}, speed).addClass("animation-complete");
                } // end if the page has scrolled enough check
            } // end only reveal the element once
        });
    }
    function revealCommands() {
        jQuery(".title").revealOnScroll("right", 1200);
    }

    calcScrollValues();
    revealCommands();

    // run the following on every scroll event
    jQuery(window).scroll(function () {
        calcScrollValues()
        revealCommands();
    }); // end on scroll

});

如果您取消注释笔中的 Jquery 代码，这项工作就可以实现。

这是JS代码

function calcScrollValues() {
    windowHeight = screen.height;
    windowScrollPosTop = document.body.scrollTop;
    windowScrollPosBottom = windowHeight + windowScrollPosTop;
};
window.onload = function () {
    var windowHeight, windowScrollPosTop, windowScrollPosBottom = 0;

    function revealOnScroll(direction, speed) {
        return this.each(function () {
            var objectOffset = this.getBoundingClientRect();
            var objectOffsetTop = getBoundingClientRect();

            if (!this.classList.contains("hidden")) {
                // if argument is "right"
                if (direction == "right") {
                    this.setAttribute('style', 'opacity:0; right:700px; position: relative');
                }
                ;
                // if argument is "left"
            } else {
                this.setAttribute('style', 'opacity:0; right:700px; position: relative');
            }
            ;
            this.classList.add("hidden");
        });
        if (!this.classList.contains("animation-complete")) {

            // if the page  scrolled far enough to reveal the element
            if (windowScrollPosBottom > objectOffsetTop) {
                this.setAttribute('style', 'opacity:1; right:0; transition: speed + "ms"');
                this.classList.add("animation-complete");

            } // end if the page has scrolled enough check

        }
        ; // end only reveal the element once
    }
}

function revealCommands() {
    document.querySelector(".title").revealOnScroll("right", 1200);
}
calcScrollValues();
revealCommands();

// run the following on every scroll event
window.addEventListener('scroll', function () {
    calcScrollValues()
    revealCommands();
});

我知道“return this.each(function() {}”部分不可能在 JS 中工作，并且不知道如何获取该部分的 JS 代码。

另一个主要问题是这个
'document.querySelector(".title").revealOnScroll("右", 1200);' 显然给出了类型错误“不是函数”。

这可能还有更多问题，但这就是让我陷入困境的问题。

代码笔:

http://codepen.io/damianocel/pen/yYKyaN

Answer 1

您的原始代码添加了 revealOnScroll查询 .title 时 jQuery 返回的对象的方法(通过jQuery.fn.revealOnScroll)。通过用浏览器查询，你丢失了jQuery对象但得到了 NodeList来自document.querySelectorAll('.title')相反(您不应该使用 document.querySelector，因为它只返回一个元素 - 这不是您之前使用 jQuery 时所拥有的)。您现在需要添加 revealOnScroll NodeList原型(prototype)的方法以便像之前使用 jQuery 一样使用它。

这样做之后，您遇到了一些其他问题:NodeList看起来像，但不是Array本身没有迭代器，但您可以从 Array.prototype.forEach 借用一个迭代器.

您还会丢失this绑定(bind)，但使用 element由forEach提供相 react 该可以正常工作。

我还没有完全检查代码。它的解释没有错误，但我必须对其进行一些更改，例如将函数调用移动到 onload 内。功能。

请逐行检查，如果遇到无法自行解决的问题请反馈。

function calcScrollValues() {
    windowHeight = screen.height;
    windowScrollPosTop = document.body.scrollTop;
    windowScrollPosBottom = windowHeight + windowScrollPosTop;
};
window.onload = function () {
    var windowHeight, windowScrollPosTop, windowScrollPosBottom = 0;

    NodeList.prototype.revealOnScroll = function(direction, speed) {
        Array.prototype.forEach.call(self, function (element, index) {
            var objectOffset = element.getBoundingClientRect();
            var objectOffsetTop = getBoundingClientRect();

            if (!element.classList.indexOf("hidden") !== -1) {
                // if argument is "right"
                if (direction == "right") {
                    element.setAttribute('style', 'opacity:0; right:700px; position: relative');
                };
            // if argument is "left"
            } else {
                element.setAttribute('style', 'opacity:0; right:700px; position: relative');
            };
            element.classList.add("hidden");
          
            if (element.classList.indexOf("animation-complete") === -1) {
                // if the page  scrolled far enough to reveal the element
                if (windowScrollPosBottom > objectOffsetTop) {
                    element.setAttribute('style', 'opacity:1; right:0; transition: speed + "ms"');
                    element.classList.add("animation-complete");
                } // end if the page has scrolled enough check
            }; // end only reveal the element once
        });
    }
    
    calcScrollValues();
    revealCommands();
}

function revealCommands() {
    document.querySelectorAll(".title").revealOnScroll("right", 1200);
}

// run the following on every scroll event
window.addEventListener('scroll', function () {
    calcScrollValues()
    revealCommands();
});

<div class="title" />