Jquery 我怎么能不重复这个功能呢

我有一个过滤系统在我的博客上，它工作得很好，但我只是想知道我怎么不能重复这个功能一遍又一遍

以下是html：

<div class="postFilter">
        <ul>
            <li><a href="#" class="filter filter1 filterActive">all</a></li>
            <li><a href="#" class="filter filter2">another link</a></li>
            <li><a href="#" class="filter filter3">third link</a></li>
            <li><a href="#" class="filter filter4">fourth</a></li>
            <li><a href="#" class="filter filter5">fifth</a></li>
        </ul>
    </div><!-- /.postFilter -->

我重复了5次，我知道我想做什么，我想看看点击的过滤器是否等于1,2,3,4,5，然后显示响应函数的代码。但是我不知道从哪里开始

忘了说我试过这个：

var filterNum;

$('.filter').on('click', function(e){
    e.preventDefault();

    if($('.filter').hasClass('filter1')){
        filterNum = 1;
    }else if($('.filter').hasClass('filter2')){
        filterNum = 2;
    }else if($('.filter').hasClass('filter3')){
        filterNum = 3;
    }else if($('.filter').hasClass('filter4')){
        filterNum = 4;
    }else if($('.filter').hasClass('filter5')){
        filterNum = 5;
    }

    filterClick(filterNum);
});



function filterClick(number){
    // add & Remove filter

    $('.filter').removeClass('filterActive');
    $('.filter' + number).addClass('filterActive');

    // hide & show categories

    $('.categ').hide();
    $('.categ' + number).show();
}

---

这样我们就不必创建jQuery对象的加载

使用

This

来引用单击的元素。此外，您还可以使用自定义的

数据
属性来引用要显示的类别：


$（'.filter'）。在（'click'，函数（e）上{
e、 预防默认值（）；
//添加和删除筛选器
var$this=$（this）；
$（'.filter'）.removeClass（'filterActive'）；
$this.addClass（'filterActive'）；
//隐藏和显示类别
$（'.categ'）.hide（）；
$（'.+$this.data（'cat'））.show（）；
});
.filterActive{
颜色：红色；
}








第一类
第二类
第三类
第四类
第五类
如果您可以修改html，我会使用数据属性来简化：

<div class="postFilter">
        <ul>
            <li><a href="#" data-filterid="1" class="filter filterActive">all</a></li>
            <li><a href="#" data-filterid="2" class="filter ">another link</a></li>
            <li><a href="#" data-filterid="3" class="filter ">third link</a></li>
            <li><a href="#" data-filterid="4" class="filter ">fourth</a></li>
            <li><a href="#" data-filterid="5" class="filter ">fifth</a></li>
        </ul>
    </div><!-- /.postFilter -->

这个
.categ
在哪里？假设它在
中，则应该可以：


$（'.filter'）。在（'click'，函数（e）上{
e、 预防默认值（）；
//添加和删除筛选器
$（'.filter'）.removeClass（'filterActive'）；
$（this.addClass（'filterActive'）；
//隐藏和显示类别
$（'.categ'）.hide（）；
$（this.next（'.categ'）.show（）；
/*如果.categ位于.filter内，请改用此选项：
$（this.find（'.categ'）.show（）；
如果.categ在外部，则需要使用以下内容：
$（this.parents（）.next（'.categ'）.show（）；
*/
});


美食
美食
美食
美食
美食

您的尝试已接近尾声，但是您可能希望使用
$（'.filter'）.hasClass（）
，而不是使用
$（this）.hasClass（）
。很高兴听到这个消息。虽然你的想法可行，但我个人喜欢下面empiric的答案。使用数据属性是避免庞大的
if/else
部分的一种好方法。您希望编写代码，这样您就可以拥有99个过滤器，而不必触碰它，
data
方法实现了这一点，而您的代码将需要更多94行代码：）这一点可以改进，因为您在单击事件中使用JQuery选择器，它必须在每次单击时进行选择，这是不必要的，而且没有表现
var $filters = $('.filter');
var $filtered = $('.categ');

$filters.on('click', function(){
   $filters.removeClass('filterActive');
   $(this).addClass('filterActive'); 
   $filtered.removeClass('filterActive');
   $filtered.eq(k).addClass('filterActive');  
});

<div class="postFilter">
        <ul>
            <li><a href="#" data-filterid="1" class="filter filterActive">all</a></li>
            <li><a href="#" data-filterid="2" class="filter ">another link</a></li>
            <li><a href="#" data-filterid="3" class="filter ">third link</a></li>
            <li><a href="#" data-filterid="4" class="filter ">fourth</a></li>
            <li><a href="#" data-filterid="5" class="filter ">fifth</a></li>
        </ul>
    </div><!-- /.postFilter -->

$('.filter').on('click', function(e){
    e.preventDefault();

    $('.filter').removeClass('filterActive');
    $(this).addClass('filterActive');

    $('.categ').hide();
    $('.categ' + $(this).data('filterid')).show();
});