将多个jquery函数合并为一个

Merging multiple jquery functions into one

本文关键字：一个 合并 jquery 函数      更新时间：2023-09-26

我对jquery很陌生。我似乎可以让东西发挥作用，但代码的长度很可怕，我发现自己在重复。。。

有人能用最短的方法写下以下内容吗。。。我尝试过各种方法，但它打乱了代码的工作方式。。。这基本上是一个循序渐进的过程中的一系列面板和按钮。。。单击一个按钮后，下一个按钮会淡入并自动滚动到特定高度。

<script>
        $(".steptwobtn").on( "click", function(e){
            $(".steptwo").fadeIn().css("display","block");
            $(".costs").fadeIn().css("display","block");
            var target = $( $(this).attr('href') );
            if( target.length ) {
                event.preventDefault();
                $('html, body').animate({
                    scrollTop: (target.offset().top)-155
                }, 1000);
            }
        });
        $(".stepthreebtn").on( "click", function(e){
            $(".stepthree").fadeIn().css("display","block");
            $(".size-costs span").css("visibility","visible");
            var target = $( $(this).attr('href') );
            if( target.length ) {
                event.preventDefault();
                $('html, body').animate({
                    scrollTop: (target.offset().top)-155
                }, 1000);
            }
        });
        $(".stepfourbtn").on( "click", function(e){
            $(".stepfour").fadeIn().css("display","block");
            $(".worktop-costs span").css("visibility","visible");
            var target = $( $(this).attr('href') );
            if( target.length ) {
                event.preventDefault();
                $('html, body').animate({
                    scrollTop: (target.offset().top)-155
                }, 1000);
            }
        });
        $(".stepfivebtn").on( "click", function(e){
            $(".stepfive").fadeIn().css("display","block");
            $(".appliances-costs span").css("visibility","visible");
            $(".install-costs span").css("visibility","visible");
            $(".total-costs span").css("visibility","visible");
            var target = $( $(this).attr('href') );
            if( target.length ) {
                event.preventDefault();
                $('html, body').animate({
                    scrollTop: (target.offset().top)-155
                }, 1000);
            }
        });
    </script>

我想一定有一种更整洁的写作方式，而不必每次都重复滚动功能？

非常感谢。我要把头发扯掉了！

G

您可以将滚动逻辑移到一个单独的函数中，然后从每个jQuery点击处理程序中调用它：

<script>
    $(".steptwobtn").on( "click", function(e){
        $(".steptwo").fadeIn().css("display","block");
        $(".costs").fadeIn().css("display","block");
        scroll(this);
    });
    $(".stepthreebtn").on( "click", function(e){
        $(".stepthree").fadeIn().css("display","block");
        $(".size-costs span").css("visibility","visible");
        scroll(this);
    });
    $(".stepfourbtn").on( "click", function(e){
        $(".stepfour").fadeIn().css("display","block");
        $(".worktop-costs span").css("visibility","visible");
        scroll(this);
    });
    $(".stepfivebtn").on( "click", function(e){
        $(".stepfive").fadeIn().css("display","block");
        $(".appliances-costs span").css("visibility","visible");
        $(".install-costs span").css("visibility","visible");
        $(".total-costs span").css("visibility","visible");
        scroll(this);
    });
    function scroll(btn) {
        var target = $( $(btn).attr('href') );
        if( target.length ) {
            event.preventDefault();
            $('html, body').animate({
                scrollTop: (target.offset().top)-155
            }, 1000);
        }
    }
</script>

或者，如果你想将它们合并在一起，你可以执行以下操作。问题是，每个函数都在做一些微妙的不同事情。为了实现以下功能，您需要为每个btn添加一个属性"data step number"，并将每个按钮的css类更改为"stepbtn"：

<script>
    $(".stepbtn").click(function(e) {
        var step = $(this).attr('data-step-number');
        $(".step" + step).fadeIn().css("display","block");
        switch (step) {
            case 2:
                $(".costs").fadeIn().css("display","block");
                break;
            case 3:
                $(".size-costs span").css("visibility","visible");
                break;
            case 4:
                $(".worktop-costs span").css("visibility","visible");
                break;
            case 5:
                $(".appliances-costs span").css("visibility","visible");
                $(".install-costs span").css("visibility","visible");
                $(".total-costs span").css("visibility","visible");
                break;
        }
        var target = $( $(this).attr('href') );
        if( target.length ) {
            event.preventDefault();
            $('html, body').animate({
                scrollTop: (target.offset().top)-155
            }, 1000);
        }
    });
</script>
相关文章：