使用javascript/jquery检测是否有任何具有给定类的元素在视图中

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

然后，我检测这些元素在浏览器中何时出现，然后使用jquery的show（）方法触发事件以向页面显示警告

其思想是，当元素离开视口时，使用jquery的hide（）方法隐藏警告

当元素只有一个实例存在时，我就可以这样做，但是如果有多个实例，show（）和hide（）方法之间就会发生冲突

$（文档）.ready（函数（）{
$（“body”）.html（函数（）{
return$（this.html（））
.替换（“单词”、“单词”）
});
$（窗口）。滚动（函数（）{
$（“.custom类”）.each（函数（）{
var top\u of_元素=$（this）.offset（）.top；
变量bottom\u of_元素=$（this.offset（）.top+$（this.outerHeight（）；
var bottom\u of_screen=$（window.scrollTop（）+window.innerHeight；
var top\u of_screen=$（window.scrollTop（）；
if（（屏幕底部>元素顶部）&&（屏幕顶部<元素底部））{
$（'.custom warning'）.show（）；
}否则{
$（'.custom warning'）.hide（）；
}
});
});
});

“word”在视图中的第一个实例永远不会显示警告，因为它会被不在视图中的第二个实例关闭

---

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

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

这应该是可行的：

$(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();
            }
        });
    });

$（窗口）。滚动（函数（）{
$（'.custom warning'）.hide（）；
$（“.custom类”）.each（函数（）{
var top\u of_元素=$（this）.offset（）.top；
变量bottom\u of_元素=$（this.offset（）.top+$（this.outerHeight（）；
var bottom\u of_screen=$（window.scrollTop（）+window.innerHeight；
var top\u of_screen=$（window.scrollTop（）；
if（（屏幕底部>元素顶部）&&（屏幕顶部<元素底部））{
$（'.custom warning'）.show（）；
}
});
});

另一个提示：

---

因为scroll经常启动，所以我会将scroll函数包装成一个去盎司函数。

你能显示你的

html

代码吗？如果不重复的话，它与WOW相关！是的，这完全有效。如此简单而优雅的解决方案；）谢谢

$(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();
            }
        });
    });