【jQuery】コードが長くダサいので、シンプルにまとめたい

Question

機能は動きます。
ただ、コードが恐らく無駄に長いので、シンプルにまとめる方法をご教授いただけたら幸いです。
つぎはぎで手探りでコードを書いていたら、下記のようなコードになってしまいました、、、

    <script>
        $(function() {
            $(':radio.now, #wight__wrap :checkbox').on('change',function(e) {
                var scores = $(':radio.now:checked,#wight__wrap :checkbox:checked').map(function(){
                    return parseInt($(this).data("price"));
                }).get()||[];
                if($('#p__model__inner a.submitBtn').data("price")>0){
                    scores.push($('#p__model__inner a.submitBtn').data("price"));
                }
                if($('#p__engraving__inner a.submitBtn').data("price")>0){
                    scores.push($('#p__engraving__inner a.submitBtn').data("price"));
                }
                if($('#p__grip__inner a.submitBtn').data("price")>0){
                    scores.push($('#p__grip__inner a.submitBtn').data("price"));
                }
                if($('#p__shaftband__inner a.submitBtn').data("price")>0){
                    scores.push($('#p__shaftband__inner a.submitBtn').data("price"));
                }
                if($('#p__cover__inner a.submitBtn').data("price")>0){
                    scores.push($('#p__cover__inner a.submitBtn').data("price"));
                }
                if($('#weight__stamp__inner a.submitBtn').data("price")>0){
                    scores.push($('#weight__stamp__inner a.submitBtn').data("price"));
                }
                if($('#p__option__inner a.submitBtn').data("price")>0){
                    scores.push($('#p__option__inner a.submitBtn').data("price"));
                }
                if(scores.length>0){
                    var sum = scores.reduce((a,x)=>a+x);
                    if (sum >= 30000) {
                        $("#sent").text(0);
                    } else {
                        $("#sent").text(550);
                    }
                    var postage = Number($("#sent").text());
                    if ($(":radio.plusbutton").is(":checked") && $(":radio.plusthree").is(":checked")) {
                        sum -= 30000;
                    }
                    if ($(":radio.plusbutton").is(":checked") && $(":radio.ifplate").is(":checked")) {
                        sum -= 12000;
                    }
                    $("#sum").text(sum);
                    $("#tax").text(sum * 0.1);
                    $("#all").text(sum + sum * 0.1 + postage);
                }
            }).eq(0).trigger('change');

            $('#p__model__inner a.submitBtn').on('click', function(e) {
                e.preventDefault();
                $(this).data("price",$('[name=model]:checked').data('price'));
                $(':radio.now').eq(0).trigger('change');
            }).data("price",0);

            $('#p__engraving__inner a.submitBtn').on('click', function(e) {
                e.preventDefault();
                $(this).data("price",$('[name=engraving]:checked').data('price'));
                $(':radio.now').eq(0).trigger('change');
            }).data("price",0);

            $('#p__grip__inner a.submitBtn').on('click', function(e) {
                e.preventDefault();
                $(this).data("price",$('[name=grip]:checked').data('price'));
                $(':radio.now').eq(0).trigger('change');
            }).data("price",0);

            $('#p__shaftband__inner a.submitBtn').on('click', function(e) {
                e.preventDefault();
                $(this).data("price",$('[name=shaftband]:checked').data('price'));
                $(':radio.now').eq(0).trigger('change');
            }).data("price",0);

            $('#p__cover__inner a.submitBtn').on('click', function(e) {
                e.preventDefault();
                $(this).data("price",$('[name=weight__stamp]:checked').data('price'));
                $(':radio.now').eq(0).trigger('change');
            }).data("price",0);

            $('#weight__stamp__inner a.submitBtn').on('click', function(e) {
                e.preventDefault();
                $(this).data("price",$('[name=p__cover]:checked').data('price'));
                $(':radio.now').eq(0).trigger('change');
            }).data("price",0);

            $('#p__option__inner a.submitBtn').on('click', function(e) {
                e.preventDefault();
                $(this).data("price",$('[name=p__option]:checked').data('price'));
                $(':radio.now').eq(0).trigger('change');
            }).data("price",0);

        });
    </script>

Comments

[m.ts10806]

>機能は動きます

仕様を説明せずにコードだけで理解しろと言うのは横暴ではないでしょうか。
リファクタリングをする上で大事なのは「改修後も同じ動作をすること」です。
ダサいかどうかはどうでも良く、どのような機能なのかをきちんと説明しないことには見た目簡潔なコードに見えても同じ動作をしない可能性もあります。
全ての要件を満たしたうえでリファクタリングする必要がありますね。
ということでJavaScriptのコードだけ提示されても再現確認ができません。
HTML,CSS含めて仕様もきちんと提示してください。

[退会済みユーザー]

お世話になっております。
ご回答頂き、誠に有難うございます。

今後、上記の点を気をつけたいと思います。
引き続き、どうぞよろしくおねがいいたします。

Answer 1

例えば、

if($('#p__model__inner a.submitBtn').data("price")>0){
	scores.push($('#p__model__inner a.submitBtn').data("price"));
}
if($('#p__engraving__inner a.submitBtn').data("price")>0){
	scores.push($('#p__engraving__inner a.submitBtn').data("price"));
}

の部分は、

var a;

a = $('#p__model__inner a.submitBtn');
if(a.data("price")>0){
	scores.push(a.data("price"));
}

a = $('#p__engraving__inner a.submitBtn');
if(a.data("price")>0){
	scores.push(a.data("price"));
}

のように書き直すことで、

if(a.data("price")>0){
	scores.push(a.data("price"));
}

を共通のコードとして取り出せます。
この部分を関数化することで、

var f = function(a) {
	if(a.data("price")>0){
		scores.push(a.data("price"));
	}
};

f($('#p__model__inner a.submitBtn'));
f($('#p__engraving__inner a.submitBtn'));

のように書けます。

リファクタリングの基本はこんな感じです。
これ以上は作業依頼となるので、あとはご自身でがんばってください。

Comments

[退会済みユーザー]

お世話になっております。
具体的なコードまで頂き、非常に有難うございます！
上記で実践したいと思います。

Answer 2

たぶんクラスでまとめると驚くほど短くなると思います
逆にhtmlを例示し何をトリガーにどうしたいか書いたほうが回答はしやすいと思います

Comments

[退会済みユーザー]

お世話になっております。
いつもご回答頂き、誠に有難うございます。
非常に参考になりました。
今後、上記の点を気をつけたいと思います。