我怎么能不重复这个功能

Question

我有我的博客上的过滤系统，它工作正常，但即时通讯只是想知道我不能重复这个功能一遍又一遍。

继承人的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 --> 

，我使用jQuery：

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

    // add & Remove filter 

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

    // hide & show categories 

    $('.categ').hide(); 
    $('.categ1').show(); 
}); 

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

    // add & Remove filter 

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

    // hide & show categories 

    $('.categ').hide(); 
    $('.categ2').show(); 
}); 

我重复这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(); 
} 

Answer 1

使用this来指代点击elemten。此外，以您可以使用自定义data属性来引用的类别要显示：

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

 
    // add & Remove filter 
 
    var $this = $(this); 
 

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

 
    // hide & show categories 
 
    $('.categ').hide(); 
 
    $('.' + $this.data('cat')).show(); 
 
});

.filterActive { 
 
    color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="postFilter"> 
 
    <ul> 
 
    <li><a href="#" class="filter filterActive" data-cat="categ1">all</a></li> 
 
    <li><a href="#" class="filter" data-cat="categ2">another link</a></li> 
 
    <li><a href="#" class="filter" data-cat="categ3">third link</a></li> 
 
    <li><a href="#" class="filter" data-cat="categ4">fourth</a></li> 
 
    <li><a href="#" class="filter" data-cat="categ5">fifth</a></li> 
 
    </ul> 
 
</div> 
 
<div class="cat"> 
 
    <div class="categ categ1"> 
 
    Cat1 
 
    </div> 
 
    <div class="categ categ2"> 
 
    Cat2 
 
    </div> 
 
    <div class="categ categ3"> 
 
    Cat3 
 
    </div> 
 
    <div class="categ categ4"> 
 
    Cat4 
 
    </div> 
 
    <div class="categ categ5"> 
 
    Cat5 
 
    </div> 
 
</div>

Answer 2

var $filters = $('.filter'); 
var $filtered = $('.categ'); 

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

https://codepen.io/mrbizle/pen/vZKYgq

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

Answer 3

如果你可以修改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 --> 

---

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

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

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

Answer 4

这是什么.categ？假设它的<li>内，这应该工作：（ '过滤器'）。

$('.filter').on('click', function(e) { 
 
    e.preventDefault(); 
 
    // add & Remove filter 
 
    $('.filter').removeClass('filterActive'); 
 
    $(this).addClass('filterActive'); 
 
    // hide & show categories 
 
    $('.categ').hide(); 
 
    $(this).next('.categ').show(); 
 
    /* If .categ is inside the .filter, use this instead: 
 
    $(this).find('.categ').show(); 
 
    And if .categ is outside, you'll need to use something like: 
 
    $(this).parents().next('.categ').show(); 
 
    */ 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<div class="postFilter"> 
 
    <ul> 
 
    <li><a href="#" class="filter filter1 filterActive">all</a><span class="categ categ1" style="display: none;">categ</span></li> 
 
    <li><a href="#" class="filter filter2">another link</a><span class="categ categ2" style="display: none;">categ</span></li> 
 
    <li><a href="#" class="filter filter3">third link</a><span class="categ categ3" style="display: none;">categ</span></li> 
 
    <li><a href="#" class="filter filter4">fourth</a><span class="categ categ4" style="display: none;">categ</span></li> 
 
    <li><a href="#" class="filter filter5">fifth</a><span class="categ categ5" style="display: none;">categ</span></li> 
 
    </ul> 
 
</div>