Блог

У меня есть веб-сайт WordPress, который вы можете просмотреть здесь: PRAXIS3.com .

На этой конкретной странице «Автомобильная промышленность» у меня есть фильтр категорий. Когда я впервые загружаю страницу, по умолчанию выбрана категория «Все«, но если вы нажмете на «Все» второй или третий раз, отобразятся ВСЕ элементы портфолио, которые есть на сайте. Ниже приведены первые несколько строк кода выбора категории.

Код выбора категории:

 <div class="btCatFilter">
    <span class="btCatFilterTitle">Category filter:</span>
    <span class="btCatFilterItem all" data-slug="">All</span>
    <span class="btCatFilterItem" data-slug="acura">Acura</span>
    <span class="btCatFilterItem" data-slug="alfa-romeo">Alfa Romeo</span>
</div>
  

У меня есть несколько пользовательских настроек CSS (чтобы скрыть отображение определенных категорий) на странице, которую вы можете просмотреть ниже.

 .automotive .btCatFilterItem[data-slug*="architecture"] {display: none;}
.automotive .btCatFilterItem[data-slug*="automotive"] {display: none;}
.automotive .btCatFilterItem[data-slug*="branding"] {display: none;}
.automotive .btCatFilterItem[data-slug*="civic"] {display: none;}
.automotive .btCatFilterItem[data-slug*="conceptual"] {display: none;}
.automotive .btCatFilterItem[data-slug*="hospitality"] {display: none;}
.automotive .btCatFilterItem[data-slug*="education"] {display: none;} 
.automotive .btCatFilterItem[data-slug*="environmental-graphics"] {display: none;} 
.automotive .btCatFilterItem[data-slug*="interior-design"] {display: none;} 
.automotive .btCatFilterItem[data-slug*="mixed-use-residential"] {display: none;} 
.automotive .btCatFilterItem[data-slug*="office"] {display: none;} 
.automotive .btCatFilterItem[data-slug*="signage-wayfinding"] {display: none;} 
.automotive .btCatFilterItem[data-slug*="financial"] {display: none;} 
.automotive .btCatFilterItem[data-slug*="retail"] {display: none;} 
.automotive .btCatFilterItem[data-slug*="rollout"] {display: none;} 
.automotive .btCatFilterItem[data-slug*="sustainable"] {display: none;} 
.automotive .btCatFilterItem[data-slug*="workplace"] {display: none;}
  

Я пытаюсь сделать так, чтобы при нажатии «Все» отображался каждый проект в категории «Автомобильная».

Я перепробовал все последующие варианты, которые только смог придумать, но ничего не помогло.

 .automotive .btCatFilterItem.all {display: "automotive";}
.automotive .btCatFilterItem.all {display: automotive;}
.automotive .btCatFilterItem.all {display: data-slug*="automotive";}
  

Мы были бы очень признательны за любую помощь. Спасибо!

Так что я думаю, что на самом деле это проблема с базой данных, а не с CSS или даже Javascript.

Глядя на ваш сайт, фильтр категорий фактически уничтожает все плитки и перезагружает соответствующие на страницу через Ajax каждый раз, когда выбирается фильтр. Это означает, что фильтр не скрывает / показывает фрагменты, он фактически каждый раз повторно заполняет содержимое страницы.

Я бы посоветовал заглянуть в настройки плагина и посмотреть, есть ли там что-то, что вы можете настроить для извлечения вашего автомобильного контента..

Но, возможно, это не вариант…

Вашим плиткам самим нужны объединяющие классы или атрибуты для таргетинга с помощью CSS или Javascript. Все они имеют одинаковый class="gridItem bt11 btGridItemLoaded" .

Если вы хотите попробовать взломать его вместе, вам нужно отредактировать скрипт, который генерирует плитки, и добавить объединяющий класс или атрибут, такой как «automotive», тогда вы можете скрыть все остальные плитки чем-то вроде

.automotive .btGridItemLoaded:not(.automotive) { display:none; }

кстати

Значения, которые вы использовали, недопустимы для display свойства. display Свойство имеет фиксированный набор значений, таких как block , inline-block , none и inherit среди прочих.