如何从 JQuery 代码重写纯 JavaScript 代码？答案

【问题标题】：How to rewrite in pure JavaScript code from JQuery code?如何从 JQuery 代码重写纯 JavaScript 代码？
【发布时间】：2021-10-30 07:46:28
【问题描述】：

我在使用 JavaScript 时遇到了一些问题。

var $animation_left_right_elements = $('.bowl');

function check_if_facilites_in_view() {
    var window_height = $window.height();
    var window_top_position = $window.scrollTop();
    var window_bottom_position = (window_top_position + window_height);

    $.each($animation_left_right_elements, function() {
        var $element = $(this);
        var element_height = $element.outerHeight();
        var element_top_position = $element.offset().top;
        var element_bottom_position = (element_top_position + element_height);

        //check to see if this current container is within viewport
        if ((element_bottom_position >= window_top_position) &&
            (element_top_position <= window_bottom_position)) {
            $element.addClass('animationToRight');
        } else {
            $element.removeClass('animationToRight');
        }
    });
}

这是我的 JQuery 代码。

我检查了这个问题convert jquery each function to pure javascript，但无法解决我的问题。
我希望有人可以帮助我。提前谢谢你。

更新

这是我试过的代码。

var animation_left_right_elements = document.querySelectorAll('bowl');

function check_if_facilites_in_view() {
    var window_height = window.innerHeight;
    var window_top_position = $window.scrollY;
    var window_bottom_position = (window_top_position + window_height);

    animation_left_right_elements.forEach(function() {
        var element = this;
        var element_height = element.outerHeight();
        var element_top_position = element.offset().top;
        var element_bottom_position = (element_top_position + element_height);

        //check to see if this current container is within viewport
        if ((element_bottom_position >= window_top_position) &&
            (element_top_position <= window_bottom_position)) {
            element.addClass('animationToRight');
        } else {
            element.removeClass('animationToRight');
        }
    });
}

【问题讨论】：

欢迎来到 SO。当涉及到asking a good question 和这个question checklist 时，您可能会发现阅读网站help section 很有用。您为解决问题而编写的代码应包含minimal reproducible example，并包含在您的问题中。
vanilla js 中的第一行是：var animation_left_right_elements = document.getElementsByClassName('bowl'); vanilla js 中的“EACH”迭代可以用 FOR 循环执行：for (var i=0, len=animation_left_right_elements.length|0; i<len; i=i+1|0) { /* code here */ }
我用我尝试过的代码更新了我的问题。
我不知道 $(this)。
感谢您的帮助。解决了。请张贴您的 cmets 作为答案。我会接受的。

标签： javascript jquery class each

【解决方案1】：

@GrafiCode 说回答我自己的问题对我有好处。这是我的答案。

var animation_left_right_elements = document.querySelectorAll('.bowl');

function check_if_facilites_in_view() {
    var window_height = window.innerHeight;
    var window_top_position = window.scrollY;
    var window_bottom_position = (window_top_position + window_height);

    animation_left_right_elements.forEach(function(item) {
        var element = item;
        var element_height = element.scrollHeight;
        var element_top_position = element.offsetTop;
        var element_bottom_position = (element_top_position + element_height);
        var video = element.firstElementChild.firstElementChild;

        if ((element_bottom_position >= window_top_position) &&
            (element_top_position <= window_bottom_position)) {
            if (!element.classList.contains('animationToRight')) {
                element.classList.add('animationToRight');
            }
        }
    });
}

【讨论】：