У меня есть галерея Isotope, которая содержит пять отдельных фильтров, которые можно применить для сортировки галереи. Если человек должен был выбрать все пять фильтров, это может привести к тому, что никакие предметы не будут показаны.
Я бы хотел показать скрытый div, если фильтры не возвращают результаты. Я искал попытку сделать это без везения.
Как показать скрытый div, если фильтры галереи изотопов достаточно специфичны, чтобы не показывать какие-либо изотопные элементы?
Задав этот вопрос, я наткнулся на свое решение. Это комбинация этого ответа и ответа на этот вопрос.
Вот код, который я использовал, чтобы делать то, что я ищу:
var $container = $('#container')
var selector = isoFilters.join('');
$container.isotope({ filter: selector }, function noResultsCheck() {
var noItems = $('<div class="element no-results"> <!-- HTML for div to show "No Results" --> </div>');
var yesItems = $('.no-results');
var numItems = $('.element:not(.isotope-hidden)').length;
if (numItems == 0) {
$container.append(noItems).isotope( 'appended', noItems );
}else{
$container.isotope( 'remove', yesItems);
}
});