如果要如何簡化Javascript倍數？

Question

有沒有一種方法可以簡化Java語言的倍數？

我有這段代碼可以在滾動到其他div時使三個不同的div出現，但是我是javascript新手，我嘗試首先聲明所有變量，但是我不確定如何編寫if部分

$(document).ready(function () {
    var topOfOthDiv1 = $("#cuidamos").offset().top - 490;

    $(window).scroll(function () {
        if ($(window).scrollTop() > topOfOthDiv1) { //scrolled past the other div?
            $("#cuidado").fadeIn(); //reached the desired point -- show div
        } else {
            $('#cuidado').fadeOut();
        }
    });
});

$(document).ready(function () {
    var topOfOthDiv2 = $("#productos").offset().top - 490;

    $(window).scroll(function () {
        if ($(window).scrollTop() > topOfOthDiv2) { //scrolled past the other div?
            $("#sabor").fadeIn(); //reached the desired point -- show div
        } else {
            $('#sabor').fadeOut();
        }
    });
});


$(document).ready(function () {
    var topOfOthDiv3 = $("#encuentranos").offset().top - 490;

    $(window).scroll(function () {
        if ($(window).scrollTop() > topOfOthDiv3) { //scrolled past the other div?
            $("#locat").fadeIn(); //reached the desired point -- show div
        } else {
            $('#locat').fadeOut();
        }
    });
});

Answer 1

擺脫那些多余的.ready()和.scroll()處理程序，然后將所有內容都放入一個。

然后繪制要淡入其原始.offset().top位置的每個元素的ID的映射。

然后在.scroll()處理程序中，迭代地圖，並使用每個地圖的ID和上限值與當前scrollTop()位置進行比較，以決定是否應使其褪色。

通過使用方括號和條件運算符選擇要動態調用的方法的名稱，也可以消除if語句本身。

---

$(function () {
    var tops = {
        cuidaado: $("#cuidamos").offset().top - 490,
        sabor: $("#productos").offset().top - 490,
        locat: $("#encuentranos").offset().top - 490
    };

    $(window).scroll(function () {
        var top = $(window).scrollTop();

        $.each(tops, function(id, this_top) {
            $("#" + id)[top > this_top ? "fadeIn" : "fadeOut"]();
        });
    });
});

Answer 2

一個解決方案應該給您的div一個類，並將目標與它們一起存儲。

如何在div中存儲目標？

<div id="cuidamos" class="my-div-class" data-target-id="cuidado"></div>
<div id="productos" class="my-div-class" data-target-id="sabor"></div>
<div id="encuentranos" class="my-div-class" data-target-id="locat"></div>

正如@squint所提到的，您只需要一個對所有div都執行此操作的事件。

然后，您的代碼應為以下內容：

$(window).scroll(function () {
    var windowTop = $(window).scrollTop();
    var $div;
    var divTop;
    var $divTarget;

    $('.my-div-class').each(function(div) {
        $div = $(div);
        divTop = $div.offset().top - 490;
        $divTarget = $('#' + $div.data('target-id'));

        if (windowTop > divTop) {
            $divTarget.fadeIn();
        } else {
            $divTarget.fadeOut();
        }
    });
});

Answer 3

您可以先存儲divs地圖，然后再執行所需的操作。 像這樣：

$(document).ready(function () {

var divsMap = {
    'cuidamos': 'cuidado',
    'products': 'sabor',
    'encuentranos': 'locat'
};

$(window).scroll(function () {
    $.each(divsMap, function(key, item){
        var topOfDiv = $('#'+key).offset().top - 490;
        if ($(window).scrollTop() > topOfDiv) { //scrolled past the other div?
            $('#'+item).fadeIn();                   //reached the desired point -- show div
        } else {
            $('#'+item).fadeOut();
        }
    });
});
});

Answer 4

var obj = {
    "#cuidado" : $("#cuidamos").offset().top - 490,
    "#sabor" : $("#productos").offset().top - 490,
    "#locat" : $("#encuentranos").offset().top - 490
};

$(window).scroll(function () {
    $.each(arr , function(key, val) {
        if ($(window).scrollTop() > val) {
            $(key).fadeIn();
        }else{
            $(key).fadeOut();
        }
    });
});