JavaScriptのクリックイベントをリファクタリングする

Question

次のjavascriptのクリックイベントがあります。不確定量のcat-#クラスがあります。このコードの重複だけでなく、ハードコーディングされていない追加の番号を処理する機能を回避するには、どうすればよいでしょうか？

$(document).on('click', '#browse-category .cat-1', function (e) { 
    $('#browse-condition li[class^="cat"').addClass('hidden'); 
    $('#browse-condition .cat-1').removeClass('hidden'); 
}); 

$(document).on('click', '#browse-category .cat-2', function (e) { 
    $('#browse-condition li[class^="cat"').addClass('hidden'); 
    $('#browse-condition .cat-2').removeClass('hidden'); 
}); 

$(document).on('click', '#browse-category .cat-3', function (e) { 
    $('#browse-condition li[class^="cat"').addClass('hidden'); 
    $('#browse-condition .cat-3').removeClass('hidden'); 
}); 

$(document).on('click', '#browse-category .cat-4', function (e) { 
    $('#browse-condition li[class^="cat"').addClass('hidden'); 
    $('#browse-condition .cat-4').removeClass('hidden'); 
}); 

$(document).on('click', '#browse-category .cat-5', function (e) { 
    $('#browse-condition li[class^="cat"').addClass('hidden'); 
    $('#browse-condition .cat-5').removeClass('hidden'); 
}); 

Answer 1

は、私はあなたがしたいと思います。この

var setClickListener = function(target1, target2){ 
    $(document).on("click", target1, function (e) { 
     $("#browse-condition li[class^='cat']").addClass("hidden"); 
     $("#browse-condition" + target2).removeClass("hidden"); 
    }); 
}; 
var baseSelector1 = "#browse-category .cat-"; 
var baseSelector2 = ".cat-"; 
for(var i=0; i<5; i++){ 
     setClickListener(baseSelector + i, baseSelector2 +i); 
} 

Answer 2

私は、特定のクラス名を持つすべての項目を選択し、各要素にクリックイベントを割り当てるので、同様にされてどうなるのか：

var items = $("li[class^='cat']"); 
 

 
items.each(function() { 
 
\t $(this).on('click', function (e) { 
 
\t \t var cssClass = $(this).attr("class"); 
 
\t \t $('#browse-condition li[class^="cat"').addClass('hidden'); 
 
\t \t $('#browse-condition .' + cssClass).removeClass('hidden'); 
 
\t }); 
 
})

この方法あなたはいつも適切な量のclickeventsを手に入れます。