Портфолио jQuery Filterable: не загружать все элементы <li> - PullRequest
Новая
       6

Портфолио jQuery Filterable: не загружать все элементы <li>

0 голосов
/ 21 июня 2010

Я озадачен тем, как это сделать, поэтому не все элементы <li> загружаются при обновлении страницы. Фильтрация работает отлично при каждом выборе ссылки в «фильтре» <ul>, но при перезагрузке страницы отображаются все элементы <li>, а не только фильтрованные.

Код от 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 Ответ

0 голосов
/ 21 июня 2010

Вы пытаетесь передать фильтр на перезагрузку страницы? Если да, вы можете передать переменную в URL или использовать куки.

...