重構javascript單擊事件

-1

我有以下JavaScript單擊事件。有一個不確定數量的cat-#類。我怎樣才能最好地重構這個以避免代碼重複以及處理其他未經硬編碼的數字的能力？重構javascript單擊事件

$(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'); 
});

來源

2017-06-14 noclist

我想你想這

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); 
}

來源

2017-06-14 15:22:32

謝謝，不得不改變一些小事情，讓這個工作。你錯過了第3行選擇器中的結尾'''，我不得不將baseSelector2改成'「.cat-'以包含空格和點類符號 – noclist

我討厭這位編輯，阿哈哈很樂意幫忙。乾杯 –

我做了修補程序，以便將來對其他人有用！ –

我會做的是選擇所有與特定的類名的項目，然後分配click事件給每個元素，像這樣：

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。

來源

2017-06-14 15:29:38

重構javascript單擊事件

回答

相關問題