重构 Jquery 函数以使其可重用

Refactor Jquery function to be reusable

本文关键字：Jquery 函数 重构      更新时间：2023-09-26

我编写了一个函数，该函数将容器的偏移量与滚动时的窗口滚动顶部进行比较，并在容器距离视口顶部"X"像素数后淡入内容。现在，该功能特定于一个容器。我在页面上有另一个容器，我想在其上运行相同的函数，但对 jquery/javascript 相当陌生，无法找到重构以供重用的方法。

$(function(){
    // Get the offset of container and compare it to $(window).scrollTop
    var cont = $('.intro__skills-cont');
    var contPos = cont.offset().top;
    var windowPos = $(window).scrollTop();
    // Hide skillsContainer
    cont.addClass('is-hidden');
    $(window).scroll(function(event){
        windowPos = $(this).scrollTop();
        if(windowPos > contPos - 250) {
            cont.removeClass('.is-hidden');
            cont.addClass('is-fading-up');
        }
    }); // end window scroll
});

这是我当前的HTML结构，我希望能够在其上运行函数 

    <div class="intro__skills-cont">
        <div class="intro__skills-design">
            <svg><use xlink:href="#shape-design" /></svg>
            <h3 class="intro__skills-title">Design</h3>
            <p class="intro__skills-sum">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam fugit illo pariatur ad dicta mollitia nulla provident repellendus doloribus at quam veniam cumque vitae neque, cupiditate, iusto, accusamus, tenetur perferendis.</p>
        </div>
        <div class="intro__skills-dev">
            <svg><use xlink:href="#shape-dev" /></svg>
            <h3 class="intro__skills-title">Development</h3>
            <p class="intro__skills-sum">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam fugit illo pariatur ad dicta mollitia nulla provident repellendus doloribus at quam veniam cumque vitae neque, cupiditate, iusto, accusamus, tenetur perferendis.</p>
        </div>
    </div>
</div>
<div class="portfolio">
    <h2 class="intro__title">Portfolio</h2>
    <div class="portfolio__gallery">
    </div>
</div>

我知道这看起来像是我在要求免费工作，但实际上只是在寻找朝着正确方向前进的动力。

这是我的最新尝试，但它在 contPos 上出错了任何帮助将不胜感激。干杯！

function fadeUp(containerClass) {
    var cont = "$('." + containerClass + "')";
    var contPos = cont.offset().top;
    var windowPos = $(window).scrollTop();
    cont.addClass('is-hidden');
    $(window).scroll(function(event){
        windowPos = $(this).scrollTop();
        if(windowPos > contPos - 250) {
            cont.removeClass('.is-hidden');
            cont.addClass('is-fading-up');
        }
    });

}
fadeUp('intro__skils-cont');

我建议你编写函数来获取jQuery对象。然后，您可以在调用它时使用所需的任何选择器。此外，您应该编写它来处理多个元素。您可以使用.each()。

function fadeUp($elements) {
    $elements.each(function() {
        var $element = $(this),
            elementPos = $element.offset().top;
        $element.addClass('is-hidden');
        $(window).scroll(function() {
            if ($(this).scrollTop() > (elementPos - 250)) {
                $element.removeClass('is-hidden');
                $element.addClass('is-fading-up');
            }
        });
    });
}

然后，您可以像这样调用：

fadeUp($('.intro__skills-cont'));
fadeUp($('.intro__skills-dev'));

或者这个：

fadeUp($('.intro__skills-cont, .intro__skills-dev'));

或者在所有容器上放一个"容器"类，然后使用;

fadeUp($('.container'));

你的问题是行var cont = "$('." + containerClass + "')";。 您希望将定位器传递给$()，而不是创建字符串"$(intro__skills-cont)"。

你可以尝试类似的东西

function fadeUp(container) {   
    var cont = $(container);
    //...
}
fadeUp('.intro__skills-cont');

您会注意到，我没有将'.'附加到定位器前面。 这样做的好处是允许你传入 DOM 对象以及 jQuery 定位器。

有几种方法可以做到这一点基于您当前的淡入淡出功能

function fadeUp(containerClass) {
    var cont = $('.'+containerClass);
    var contPos = cont.offset().top;
    var windowPos = $(window).scrollTop();
    cont.addClass('is-hidden');
    $(window).scroll(function(event){
        windowPos = $(this).scrollTop();
        if(windowPos > contPos - 250) {
            cont.removeClass('.is-hidden');
            cont.addClass('is-fading-up');
        }
    });
}
相关文章：