Код JQuery работает, но должен быть способ уменьшить его.

Question

Мне удалось, наконец, получить этот код, который затухает div и вводит его на основе хэштега в URL-адресе и зависит от того, окна. 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-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

Вы можете использовать атрибут starts with селектор итерацию через DIV, получить идентификатор и сравнить с адресом хэша:

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