javascript - 使用 javascript/jquery 检测是否具有给定类的任何元素

Question

我编写了一个脚本来检测某个字符串是否存在于页面的 HTML 中，然后用包含类的 span 包装该字符串。该字符串可以在同一页面中出现多次。

然后我会检测这些元素中的任何一个何时在浏览器中可见，然后触发一个事件以使用 jquery 的 show() 方法向页面显示警告。

想法是，当元素离开视口(viewport)时，使用 jquery 的 hide() 方法隐藏警告。

当只有一个元素实例存在时，我可以正常工作，但如果有多个实例，则 show() 和 hide() 方法之间会发生冲突。

$(document).ready(function(){

    $("body").html(function () {
        return $(this).html()
            .replace("word", "<span class='custom-class'>word</span>")
    });

    $(window).scroll(function() {
        $(".custom-class").each(function(){
            var top_of_element = $(this).offset().top;
            var bottom_of_element = $(this).offset().top + $(this).outerHeight();
            var bottom_of_screen = $(window).scrollTop() + window.innerHeight;
            var top_of_screen = $(window).scrollTop();

            if((bottom_of_screen > top_of_element) && (top_of_screen < bottom_of_element)){
                $('.custom-warning').show();
            } else {
                $('.custom-warning').hide();
            }
        });
    });

});

“词”的第一个实例在 View 中不会显示警告，因为它随后被不在 View 中的第二个实例关闭。

有人知道如何克服这个问题吗？

Answer 1

我认为正确的行为是:如果视口(viewport)中有匹配元素，则显示警告。

这应该可以工作:

$(window).scroll(function() {
        $('.custom-warning').hide();
        $(".custom-class").each(function(){
            var top_of_element = $(this).offset().top;
            var bottom_of_element = $(this).offset().top + $(this).outerHeight();
            var bottom_of_screen = $(window).scrollTop() + window.innerHeight;
            var top_of_screen = $(window).scrollTop();

            if((bottom_of_screen > top_of_element) && (top_of_screen < bottom_of_element)){
                $('.custom-warning').show();
            }
        });
    });

另一个提示:因为滚动经常触发，所以我会将滚动功能包装到去抖动功能中。