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

Exception::throwExcept()

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

这样我们就不必创建大量的jQuery对象

Answer 2

使用this来引用点击的元素。除此之外，您还可以使用自定义data属性来引用要显示的类别：

＆＃13;

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

＆＃13;

.filterActive {
  color: red;
}

＆＃13;

<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>

＆＃13;

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

<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(); */ });内，这应该可行：

＆＃13;

<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>

＆＃13;

{{1}}

＆＃13;

我怎能不重复这个功能

4 个答案: