重构重复的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

我要做的是选择具有特定类名的所有项目，然后将click事件分配给每个元素，如下所示：

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

这样，您始终可以获得正确数量的clickevent。