«Создайте« фильтруемое »портфолио с помощью JQuery», используя раскрывающиеся списки HTML <select>

Question

«Создайте« фильтруемое »портфолио с помощью JQuery», используя раскрывающиеся списки HTML <select>

0

Я хотел бы изменить скрипт из этой статьи: Создайте "Filterable" Portfolio с JQuery, который будет использоваться с выпадающим меню HTML.

Мой HTML

 <select id="target">
    <option class="current">all</option>
    <option value="2014">2014</option>
 </select>

Исходный образец HTML

<ul id="portfolio">
<li><a href="#"><img src="images/a-list-apart.png" alt="" height="115" width="200" />A List Apart</a></li>
<li><a href="#"><img src="images/apple.png" alt="" height="115" width="200" />Apple</a></li>
<li><a href="#"><img src="images/cnn.png" alt="" height="115" width="200" />CNN</a></li>

Пример портфеля

<ul id="portfolio">   
<li class="integration design">  
    <a href="#"><img src="images/apple.png" alt="" height="115" width="200" />Apple</a>  
</li>  
<li class="design development">  
    <a href="#"><img src="images/cnn.png" alt="" height="115" width="200" />CNN</a>  
</li>  
<li class="cms">  
    <a href="#"><img src="images/digg.png" alt="" height="115" width="200" />Digg</a>  
</li>

JQuery

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

благодаря

user3617189 08 май 2014, в 19:03

Источник

Теги:

jquery

html

1 ответ

Ещё вопросы

user3617189 · Answer 1 · 2014-05-10T18-01-00.000Z

Понял! Довольно просто, но нужно было немного узнать jQuery.

HTML (обратите внимание, что я изменил идентификатор на "год")

<select id="year">
    <option value="all" class="current">All</option>
    <option value="2014">2014</option>
</select>

JQuery

$(document).ready(function() {
$('#year').change(function() {
    $('.current').removeClass('current');
    $(this).parent().addClass('current');

    var filterVal = ($('#year').val());

    if(filterVal == 'all') {
        $('div#works ul.hidden').fadeIn('slow').removeClass('hidden');

    } 

    else {
        $('div#works ul').each(function() {
            if(!$(this).hasClass(filterVal)) {
                $(this).fadeOut('normal').addClass('hidden');
            } else {
                $(this).fadeIn('slow').removeClass('hidden');
            }
        });
    }

});
});