Jquery代码可以工作，但必须有一种方法可以减少它

我已经设法最终使这个代码工作，它根据URL中的hashtag以及div是否触摸窗口的顶部或底部来淡入和淡出div。 jQuery看起来像这样：

var distanceFromTop = $(window).scrollTop(), distanceFromBottom = $(window).scrollTop() + $(window).height(); var divOneFromTop = $("#div-one").offset().top, divOneFromBottom = divOneFromTop + $("#div-one").height(); if (window.location.hash == "#div-one" && distanceFromTop >= divOneFromTop && !(distanceFromBottom > divOneFromBottom)) { $(".div-one-info").fadeIn(300); } else { $(".div-one-info").fadeOut(300); } var divTwoFromTop = $("#div-two").offset().top, divTwoFromBottom = divTwoFromTop + $("#div-two").height(); if (window.location.hash == "#div-two" && distanceFromTop >= divTwoFromTop && !(distanceFromBottom > divTwoFromBottom)) { $(".div-two-info").fadeIn(300); } else { $(".div-two-info").fadeOut(300); } 

事情是，我需要大约八个div，我重复自己一个荒谬的时间。 有没有人知道如何减少这种情况并使其更加“自动化”，所以我不必一直写＃div-one和divOne等等？

Answer 1

类似于以下内容：

 var id = window.location.hash; var divFromTop = $(id).offset().top, divFromBottom = divFromTop + $(id).height(); if (distanceFromTop >= divFromTop && !(distanceFromBottom > divFromBottom)) { $(id.replace("#", ".") + "-info").fadeIn(300); } else { $(id.replace("#", ".") + "-info").fadeOut(300); } 

你可能会让它更具可读性，但基本的想法是你使用文档位置哈希来识别必要的元素。

Answer 2

您可以使用带有选择器的属性启动来遍历您的div，获取ID并与位置哈希进行比较：

 $.each($('[id^="div-"]'), function () { var id = $(this).attr('id'), divOneFromTop = $(this).offset().top, divOneFromBottom = divOneFromTop + $(this).height(); if (window.location.hash == "#" + id && distanceFromTop >= divOneFromTop && !(distanceFromBottom > divOneFromBottom)) { $("." + id + "-info").fadeIn(300); } else { $("." + id + "-info").fadeOut(300); } });