jQuery代碼的工作，但必須有一個方法來瘦身下來

我已經設法終於得到這個代碼的工作，漸漸消逝的div進出基於URL的井號標籤和div的是否進行了觸摸頂部或底部的窗戶。 jQuery的是這樣的：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和我重複自己的時間可笑的量。有誰有關於一個想法，我怎麼會這樣苗條下來，讓ITA多一點「自動化」，所以我沒有寫，＃DIV-一個和divOne等所有的時間？

來源

2014-02-19 Rune

http://codereview.stackexchange.com/ – j08691

發佈你的HTML代碼段會幫助人們找到做這件事的更通用的方法（用父母，兄弟姐妹......通過實例）。 –

類似以下內容：

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

你很可能使這一點更具可讀性，但基本的想法是，你使用的文檔位置散列確定必要的元素。

來源

2014-02-19 16:02:30

非常感謝，這就像一個魅力！ – Rune

您可以使用屬性starts with選擇通過你的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); 
    } 
});

來源

2014-02-19 16:08:13 Felix

jQuery代碼的工作，但必須有一個方法來瘦身下來

回答

相關問題