Jquery 代码可以工作，但必须有一种方法来精简它

Question

我终于成功地让这段代码正常工作，它根据 URL 中的主题标签以及 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);
}

您可能可以使其更具可读性，但基本思想是使用文档位置哈希来识别必要的元素。