如果要如何简化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();
        }
    });
});