jqueryでコードの重複を防ぐ方法はありますか？

Question

私はjQueryコードの同じブロックを私のページで数回使用する必要があります。 selectorの名前とurlのパラメータのみを変更してください。

このような私のコードを見て何か：

$(document).ready(function() { 
    $("#year").change(function() { 
    var url = ''; 
    var c = $("#category").val(); 
    var d = $(this).val(); 
    if(c.trim().length) { url+='&cat='+c } 
    if(d.trim().length) { url+='&mth='+d } 
    location.href="?p=summery"+url; 
    }) 

    $("#category").change(function() { 
    var url = ''; 
    var c = $(this).val(); 
    var d = $("#year").val(); 
    if(d.trim().length) { url+='&mth='+d } 
    if(c.trim().length) { url+='&cat='+c } 
    location.href="?p=summery"+url; 
    }) 
}); 


$(document).ready(function() { 
    $("#year2").change(function() { 
    var url = ''; 
    var c = $("#category2").val(); 
    var d = $(this).val(); 
    if(c.trim().length) { url+='&cat='+c } 
    if(d.trim().length) { url+='&mth='+d } 
    location.href="?p=card"+url; 
    }) 

    $("#category2").change(function() { 
    var url = ''; 
    var c = $(this).val(); 
    var d = $("#year2").val(); 
    if(d.trim().length) { url+='&mth='+d } 
    if(c.trim().length) { url+='&cat='+c } 
    location.href="?p=card"+url; 
    }) 
}); 

$(document).ready(function() { 
    $("#year3").change(function() { 
    var url = ''; 
    var c = $("#category3").val(); 
    var d = $(this).val(); 
    if(c.trim().length) { url+='&cat='+c } 
    if(d.trim().length) { url+='&mth='+d } 
    location.href="?p=chart"+url; 
    }) 

    $("#category3").change(function() { 
    var url = ''; 
    var c = $(this).val(); 
    var d = $("#year3").val(); 
    if(d.trim().length) { url+='&mth='+d } 
    if(c.trim().length) { url+='&cat='+c } 
    location.href="?p=chart"+url; 
    }) 
}); 

コードの重複がたくさんあります。私の質問は、どのような身体も私がこのコードの重複を防ぐのを助けることができるということです。理由は、私はselectorsとurlsの多くのためのこのコードブロックにあります。

誰かが私を助けてくれることを願っています。 ありがとうございます。

Answer 1

が関数に共通のコードを抽出します。

function navigateBasedOnInput(monthInput, categoryInput, urlFragment) { 
    var url = '', 
      category = $(categoryInput).val(), 
      month = $(monthInput).val(); 

    if (category.trim().length) { 
     url += '&cat=' + encodeURIComponent(category); 
    } 
    if (month.trim().length) { 
     url += '&mth=' + encodeURIComponent(month); 
    } 

    location.href = "?p=" + encodeURIComponent(urlFragment) + url; 
} 

$(document).ready(function() { 
    $("#year, #category").change(function() { 
     navigateBasedOnInput('#year', '#category', 'summery'); 
    }); 

    $("#year2, #category2").change(function() { 
     navigateBasedOnInput('#year2', '#category2', 'card'); 
    }); 

    $("#year3, #category3").change(function() { 
     navigateBasedOnInput('#year3', '#category3', 'chart'); 
    }); 
}); 

Answer 2

共通のものを関数に移動してみてください。

function commonFunc(c, d, pStr) { 
    var url = ''; 
    if (d.trim().length) { 
     url+='&mth='+d; 
    } 
    if (c.trim().length) { 
     url+='&cat='+c; 
    } 
    return pStr+url; 
} 

次に変更機能で、それは次のようになります。

$("#year").change(function() { 
    var c = $("#category").val(); 
    var d = $(this).val(); 
    location.href = commonFunc(c, d, '?p=chart'); 
    }); 

プラスあなたも1つのレディ機能に

をすべてのリスナーを置くことができます[EDIT]追加するには良いhabbitです。あなたの文の最後に