使用Javascript重複功能

Question

我在找一些新手Javascript的幫助。

我有一系列簡單的函數，使用JQuery添加和刪除一些滑塊內容，然後單擊標註。如何重寫這些內容以適應任何類別（'cat1'等）的內容？

$('.cat1_link').click(function(event) { 
    $('.category_slides li').fadeOut(); 
    $('.cat1').fadeIn(); 
    $('article.listitem').removeClass('current'); 
    $('article.listitem.cat1').addClass('current'); 
}); 
$('.cat2_link').click(function(event) { 
    $('.category_slides li').fadeOut(); 
    $('.cat2').fadeIn(); 
    $('article.listitem').removeClass('current'); 
    $('article.listitem.cat2').addClass('current'); 
}); 

Answer 1

提取變化的「東西」，並創建一個通用函數，以保持相同的「東西」。第一個刺會是這樣的

$.each(['cat1', 'cat2'], function (i, e) { 

    $('.' + e + '_link').click(function(event) { 
     $('.category_slides li').fadeOut(); 
     $('.' + e).fadeIn(); 
     $('article.listitem').removeClass('current'); 
     $('article.listitem.' + e).addClass('current'); 
    }); 

}); 

可能有更簡潔的方式來做到這一點，取決於您的標記是什麼樣子（以及你是否有任何控制，以改變它）。

Answer 2

你的HTML改爲：

<a class="cat_link" data-category="cat1" ...> 

然後，你可以寫的jQuery爲：

$('cat_link').click(function(event) { 
    var cat_class = $(this).data('category'); 
    $('.category_slides li').fadeOut(); 
    $('.'+cat_class).fadeIn(); 
    $('article.listitem').removeClass('current'); 
    $('article.listitem.'+cat_class).addClass('current'); 
});