Question

我有一个非常简单的内容过滤器，但我需要两件小事来改进它：

默认情况下如何激活第一个标签？所以我没有展示所有内容。
点击其中一个标签时，有没有办法可以添加简单的淡入/淡出效果？

这是我的HTML和JS：

$(document).ready(function(){  
    var filters = {};
    //when a link in the filters div is clicked...  
    $('#filters a').click(function(e){  
        e.preventDefault();  
        filters[$(this).parent().attr('class')] = $(this).attr('id');  
        var show = $('#content ul li').filter(function(){ 
            for(k in filters)
                if(
                   filters.hasOwnProperty(k) &&
                   !$(this).hasClass(filters[k])
                )
                return false;
            return true;
        });
        show.show();
        $('#content ul li').not(show).hide();
        $('pre:first').html(JSON.stringify(filters));     
    });  
});

<div id='filters'>
<p class="f1" >
    <a href='#' id='mon'>Monday</a>
    <a href='#' id='tue'>Tuesday</a>
    <a href='#' id='wed'>Wednesday</a>
    <a href='#' id='thur'>Thursday</a>
    <a href='#' id='allitems'>All</a>
</p>
</div>  


    <div id='content'>  
        <ul>  
            <li class='mon allitems'>monday content goes here</li>  
            <li class='tue allitems'>tuesday content goes here</li>  
            <li class='wed allitems'>wednesday content goes here</li>  
            <li class='thur allitems'>thursdaycontent goes here</li>   
        </ul>  
</div>

Answer 1

第一个回答：您可以使用$('#mon').click();调用第一个链接的click事件，这样您就会触发click事件并运行该函数。

第二个回答： jQuery具有fadeIn() fadeOut()个函数。使用show()

的内容

http://api.jquery.com/fadein/

http://api.jquery.com/fadeout/

Jsfiddle：https://jsfiddle.net/py3ezk9y/

Answer 2

使用fadein / fadeout过滤

我认为一种更简单的过滤方法，就是使用一个（非匿名）函数，你可以从每个地方调用它：

var $listToFilter = $('#content ul');    
var $allElements = $listToFilter.find('li');
var filterCache = {};

function filterElements (filterClass) {
    var $elementsToFilter;

    if(filterCache.hasOwnProperty(filterClass)) {
        $elementsToFilter = filterCache[filterClass];
    } else {
        $elementsToFilter = $listToFilter.find('.' + filterClass);
        filterCache[filterClass] = $elementsToFilter;
    }

    $allElements.not($elementsToFilter).hide();
    $elementsToFilter.fadeIn();
}

filterElements('mon');

对于click事件，您也可以使用此功能：

$('#filters a').click(function () {
    var filterClass = $(this).attr('id');

    filterElements(filterClass);
});

Fiddel

对于洞例子，请查看此fiddle。

Answer 3

你可以这样做：

var filters = {};
//when a link in the filters div is clicked...
$('#content ul li').not(':first').hide();
  $('#filters a').click(function(e){
      e.preventDefault();
      filters[$(this).parent().attr('class')] = $(this).attr('id');
      var show = $('#content ul li').filter(function(){
          for(k in filters)
              if(
                 filters.hasOwnProperty(k) &&
                 !$(this).hasClass(filters[k])
              )
              return false;
          return true;
      });
      $('#content ul li').not(show).hide();
      show.fadeIn();
      $('pre:first').html(JSON.stringify(filters));
  });
});

简单的JS过滤器（第一个标签活动+淡入淡出效果）

3 个答案:

使用fadein / fadeout过滤

Fiddel