Question

有没有办法简化Javascript倍数？

我有这个代码，当滚动到其他div时会出现三个不同的div，但是我用javascript新建了，我尝试先声明所有变量，但我不确定如何编写if部分< / p>

$(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()处理程序，并将所有内容放在一起。

然后将要淡化的每个元素的ID映射到其原始.offset().top位置。

然后在.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();
        }
    });
});

如何简化Javascript Multiples？

4 个答案: