如何清理重复的 jquery 代码？

Question

我在一个可以提问和回答问题的系统上写作，看起来像这样：

一切正常，但代码看起来很糟糕！许多重复的部分做着几乎相同的事情。

这仅适用于 voteUp-Buttons，代码与 voteDown-Buttons 几乎相同（除了我降低分数而不是增加分数）：

$(document).ready(function(){
    $(".btn-default").click(function(){
        if( $(this).val() == 'voteUp'){

            if( $(this).hasClass("questionButton") ){

            $(this).html( "<span class='glyphicon glyphicon-arrow-up' aria-hidden='true' style='color:orange'></span>" );

            var currentScore = $(this).parent('li').find('> .num').text();
            $(this).parent('li').find('> .num').html(parseInt(currentScore) + 1);

            var currentID = $(this).parent('li').find('> .num').attr('id');

            var buttonType = "questionButton";

            <!-- AJAX script to send the voteScore to the controller and then put it into the DB -->
            $.ajax({ 
                type : 'POST',
                url : '@routes.Application.voteUp()',
                data : {
                    questionID : currentID,
                    score : currentScore,
                    type: buttonType
                    },
                success : function(data){
                    }
            });
            }

            if( $(this).hasClass("answerButton") ){

            $(this).html( "<span class='glyphicon glyphicon-arrow-up' aria-hidden='true' style='color:orange'></span>" );

            var currentScore = $(this).parent('li').find('> .num').text();
            $(this).parent('li').find('> .num').html(parseInt(currentScore) + 1);

            var currentID = $(this).parent('li').find('> .num').attr('id');

            var buttonType = "answerButton";

            <!-- AJAX script to send the voteScore to the controller and then put it into the DB -->
            $.ajax({ 
                type : 'POST',
                url : '@routes.Application.voteUp()',
                data : {
                    questionID : currentID,
                    score : currentScore,
                    type: buttonType
                    },
                success : function(data){
                    }
            });
            }
        }

因为我使用了很多 $(this) 并且它的上下文发生了多次变化，所以我不确定我应该如何清理我的代码。因为目前很难阅读，因此很难维护/扩展。我想我至少可以外包 AJAX-POST，但其余的仍然是重复的。

那么如何重构我的代码并删除重复的过程？

Answer 1

已尝试优化，欢迎提出建议

$(document).ready(function() {
    $(".btn-default").on('click', function() {
        var $this = $(this),
            $num = $this.parent('li').find('> .num');

        $this.html("<span class='glyphicon glyphicon-arrow-up' aria-hidden='true' style='color:orange'></span>");

        if ($this.val() !== 'voteUp') {
            return;
        }

        if ($this.hasClass("questionButton")) {
            var buttonType = "questionButton";
        }

        // else if ?
        if ($this.hasClass("answerButton")) {
            var buttonType = "answerButton";
        }

        var currentScore = parseInt($num.text()) || 0,
            currentID = $num.attr('id');

        $num.html(currentScore + 1);

        // AJAX script to send the voteScore to the controller and then put it into the DB
        $.ajax({
            type: 'POST',
            url: '@routes.Application.voteUp()',
            data: {
                questionID: currentID,
                score: currentScore,
                type: buttonType
            },
            success: function(data) {}
        });
    });
});

如何清理重复的 jquery 代码？

How to clean up my duplicate jquery code?

html

ajax

jquery

coding-style