代码之家  ›  专栏  ›  技术社区  ›  markratledge

jQuery Filterable公文包:不加载所有<li>项

  •  0
  • markratledge  · 技术社区  · 14 年前

    我不知道该怎么做,所以不是所有的 <li> 在页面刷新时加载项目。该过滤功能可以很好地处理应用程序中的每个链接选择 <ul> “过滤器”,但在重新加载页面时,所有 <李> 项目显示,而不仅仅是过滤的内容。

    代码来自 http://net.tutsplus.com/tutorials/javascript-ajax/creating-a-filterable-portfolio-with-jquery/

    HTML:

        <div id="container">
        <li>home.com</li>
    
        <ul id="filter">
    
                <li><a href="#">books</a></li>
                <li><a href="#">essays</a></li>
                <li><a href="#">film</a></li>
    
        </ul>
    
        <ul id="portfolio">
    
    <li class="books"><a href="#"><img src="images/one.gif" alt="" height="120" width="200" />Book One</a></li>
    <li class="books"><a href="#"><img src="images/two.gif" alt="" height="120" width="200" />Book Two</a></li>     
    <li class="essays"><a href="#"><img src="images/three.gif" alt="" height="120" width="200" />Essay One</a></li>
    <li class="essays"><a href="#"><img src="images/four.gif" alt="" height="120" width="200" />Essay Two</a></li>
    <li class="film"><a href="#"><img src="images/five.gif" alt="" height="120" width="200" />Film One</a></li>
    <li class="film"><a href="#"><img src="images/six.gif" alt="" height="120" width="200" />Film Two</a></li>  
    
    </ul></div>
    

    JS:

    $(document).ready(function() {
        $('ul#filter a').click(function() {
            $(this).css('outline','none');
            $('ul#filter .current').removeClass('current');
            $(this).parent().addClass('current');
    
            var filterVal = $(this).text().toLowerCase().replace(' ','-');
    
            if(filterVal == 'all') {
                $('ul#portfolio li.hidden').fadeIn('slow').removeClass('hidden');
            } else {
    
                $('ul#portfolio li').each(function() {
                    if(!$(this).hasClass(filterVal)) {
                        $(this).fadeOut('normal').addClass('hidden');
                    } else {
                        $(this).fadeIn('slow').removeClass('hidden');
                    }
                });
            }
            return false;
        });
    });
    
    1 回复  |  直到 14 年前
        1
  •  0
  •   tcooc    14 年前

    你试图在页面重新加载时通过过滤器?如果是,您可以在url中传递变量,或者使用cookies。