如何通过增加计数器来缩短倍数

Question

I have been finding how to shorten multiple if else with counters but couldn't find anything that is related to my situation.

Currently I have too many if statements for each increasing counter.

Is there a way to achieve that?

Below is my code :

$(".gift").each(function(){

        var i = 1;

        $(this).on("click", function(){

            if(i===1){
                TweenMax.fromTo(this, 1, {x:-1}, {x:1, ease:RoughEase.ease.config({strength:8, points:5, template:Linear.easeNone, randomize:false}) , clearProps:"x"})
            }

            if(i===2){
                TweenMax.fromTo(this, 0.9, {x:-1}, {x:1, ease:RoughEase.ease.config({strength:8, points:5, template:Linear.easeNone, randomize:false}) , clearProps:"x"})
            }

            if(i===3){
                TweenMax.fromTo(this, 2/i, {x:-1}, {x:1, ease:RoughEase.ease.config({strength:8, points:5, template:Linear.easeNone, randomize:false}) , clearProps:"x"})
            }

            if(i===4){
                TweenMax.fromTo(this, 2/i, {x:-1}, {x:1, ease:RoughEase.ease.config({strength:8, points:5, template:Linear.easeNone, randomize:false}) , clearProps:"x"})
            }

            if(i===5){
                TweenMax.fromTo(this, 2/i, {x:-1}, {x:1, ease:RoughEase.ease.config({strength:8, points:5, template:Linear.easeNone, randomize:false}) , clearProps:"x"})
            }

            if(i===6){
                TweenMax.fromTo(this, 2/i, {x:-1}, {x:1, ease:RoughEase.ease.config({strength:8, points:5, template:Linear.easeNone, randomize:false}) , clearProps:"x"})
            }

            if(i===7){
                TweenMax.fromTo(this, 2/i, {x:-1}, {x:1, ease:RoughEase.ease.config({strength:8, points:5, template:Linear.easeNone, randomize:false}) , clearProps:"x"})
            }

            if(i===8){
                TweenMax.fromTo(this, 2/i, {x:-1}, {x:1, ease:RoughEase.ease.config({strength:8, points:5, template:Linear.easeNone, randomize:false}) , clearProps:"x"})
            }

            if(i===9){
                TweenMax.fromTo(this, 2/i, {x:-1}, {x:1, ease:RoughEase.ease.config({strength:8, points:5, template:Linear.easeNone, randomize:false}) , clearProps:"x"})
            }

            if(i===10){
                $this = $(this);
                TweenMax.fromTo(this, 2/i, {x:-1}, {x:1, ease:RoughEase.ease.config({strength:8, points:5, template:Linear.easeNone, randomize:false}) , clearProps:"x", onComplete:function(){
                    $this.css("top", "500px");

                    $(".gift").each(function(){
                        $(this).off("click");
                    });
                }})

            }

            i++;

            console.log(i);

        });

    });

Thanks in advance guys!

Answer 1

Another solution to "complex" if else statements as suggested in the comments is to use a switch statement:

$(".gift").each(function(){

        var i = 1;

        $(this).on("click", function(){

            switch(i) {
                case 1:
                    TweenMax.fromTo(this, 1, {x:-1}, {x:1, ease:RoughEase.ease.config({strength:8, points:5, template:Linear.easeNone, randomize:false}) , clearProps:"x"})
                    break;
                case 2:
                    TweenMax.fromTo(this, 0.9, {x:-1}, {x:1, ease:RoughEase.ease.config({strength:8, points:5, template:Linear.easeNone, randomize:false}) , clearProps:"x"})
                    break;
                case 3:
                case 4:
                case 5:
                case 6:
                case 7:
                case 8:
                case 9:
                    TweenMax.fromTo(this, 2/i, {x:-1}, {x:1, ease:RoughEase.ease.config({strength:8, points:5, template:Linear.easeNone, randomize:false}) , clearProps:"x"})
                    break;
                case 10:
                    $this = $(this);
                    TweenMax.fromTo(this, 2/i, {x:-1}, {x:1, ease:RoughEase.ease.config({strength:8, points:5, template:Linear.easeNone, randomize:false}) , clearProps:"x", onComplete:function(){
                        $this.css("top", "500px");

                        $(".gift").each(function(){
                            $(this).off("click");
                        });
                    }})
                    break;


            }

            i++;

            console.log(i);

        });

    });