WordPress 类别过滤器

Question

我有一个 Wordpress 网站，您可以在这里查看：PRAXIS3.com。

在“汽车”这个特定页面上，我有一个类别过滤器。当我第一次加载页面时，默认的“All”类别被选中，但如果你第二次或第三次点击“All”，它会显示每个投资组合项目在网站上。下面是类别选择器代码的前几行。

类别选择器代码：

<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";}

任何帮助将不胜感激。谢谢！

Answer 1

所以我认为这实际上是一个数据库问题，而不是 CSS 甚至 Javascript。

查看您的站点，类别过滤器实际上是在每次选择过滤器时都会销毁所有图块并通过 Ajax 将适当的图块重新加载到页面上。这意味着过滤器不会隐藏/显示图块，它实际上是每次都重新填充页面上的内容。

我建议您查看插件设置，看看是否有什么可以调整以提取汽车内容。

但也许这不是一个选择......

您的图块本身需要统一类或属性以使用 CSS 或 Javascript 定位。他们都有相同的class="gridItem bt11 btGridItemLoaded"。

如果你想尝试一起破解它，你需要编辑生成图块的脚本并添加一个统一的类或属性，如“汽车”，然后你可以用类似的东西隐藏所有其他图块

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

顺便说一句

您使用的值对display 属性无效。 display 属性具有一组固定的值，例如 block、inline-block、none 和 inherit 等。