Блог

Я не понимаю, почему изображения исчезают, когда я нажимаю на фильтр.

Код скрипта Quicksand (находится в вызываемом файле jquery.custom.js ):

 jQuery.noConflict();
jQuery(document).ready(function($){
    // Clone applications to get a second collection
    var $data = $("#portfolio-items").clone();

    //NOTE: Only filter on the main portfolio page, not on the subcategory pages
    $('#portfolio-terms ul li').click(function(e) {
        $("ul li").removeClass("active");   
        // Use the last category class as the category to filter by. This means that multiple categories are not supported (yet)
        var filterClass=$(this).attr('class') //.split(' ').slice(-1)[0];
        filterClass = filterClass ? filterClass.split(' ').slice(-1)[0] : '';

        if (filterClass == '.all current') {
            var $filteredData = $data.find('#portfolio-');
        } else {
            var $filteredData = $data.find('#portfolio-[data-type='   filterClass   ']');
        }
        $("#portfolio-items").quicksand($filteredData, {
            duration: 800,
            easing: 'swing',
        });     
        $(this).addClass("active");             
        return false;
    });
});
  

Здесь вы можете увидеть PHP-код элементов и терминов портфолио: http://snipt.org/Mnp8

Не могли бы вы мне помочь, пожалуйста?
Спасибо!

$data.find не выполняет поиск по атрибутам напрямую. Что будет работать, так это что-то вроде замены

 var $filteredData = $data.find('#portfolio-');
  

с

 var $filteredData = $data.find('li[id|="portfolio"]');
  

Это приведет к поиску по всем li, где идентификатор начинается с portfolio

Следующая строка ссылается на LI, А НЕ на тег a. Для элемента LI нет класса.

 $(this).attr('class') //.split(' ').slice(-1)[0];
  

предполагая, что вы поместили класс в элемент LI, вы могли бы изменить изменить эту строку из (я не уверен насчет этого):

 var $filteredData = $data.find('#portfolio-[data-type='   filterClass   ']')
  

Для:

 var $filteredData = $data.find('li.'   filterClass);
  

Пожалуйста, взгляните на
http://jsfiddle.net/bhoover10001/SzjhS / и посмотрите, является ли это более или менее той функциональностью, которая вам нужна.

А) Вы не поместили класс в элементы LI, на которые нажимается.

 <li class="all"><a href="">All</a><span>/</span></li>
<li class="term-4"><a href="" 
data-value="term-4" title="View all items filed under Colours">Colours</a> <span>/</span>
</li>
<li class="term-3" >
<a href="" data-value="term-3" title="View all items filed under Fotografie">Fotografie</a> <span>/</span>
</li>
  

B) data-id является обязательным элементом в элементе LI отображаемых элементов. Например:

 <li id="portfolio-12" class="term-4 visible" data-id="post-12">
  

C) Класс фильтра должен быть первым классом в каждом из портфолио. Вы неправильно разделили класс filter:

 filterClass = filterClass ? filterClass.split(' ')[0] : '';
  

D) Ваше условие «ВСЕ» было закодировано неправильно:

 if (filterClass == 'all')