Question

我对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>

我认为必须有一种更简洁的方式来写这个并且不必每次都重复滚动功能？

非常感谢提前。我正在撕扯我的头发！

Answer 1

您可以将滚动逻辑移到单独的函数中，然后在每个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>

将多个jquery函数合并为一个

1 个答案: