显示隐藏多个类

Question

我正在构建一个显示客户徽标的动态页面。他们可以是网络客户端、打印客户端、徽标客户端等。客户端也可以是网络和打印、打印和徽标等。

而不是像这样构建语法：

<h2>Web</h2>
<img src="/client1.jpg">
<img src="/client2.jpg">
<img src="/client3.jpg">
<h2>Print</h2>
<img src="/client2.jpg">
<img src="/client3.jpg">
<h2>Logo</h2>
<img src="/client1.jpg">
<img src="/client3.jpg">

...并用 div 包裹网页、印刷品和徽标，并显示和隐藏每个...

我想构建这样的语法：

<img src="/client2.jpg" class="web print">
<img src="/client3.jpg" class="web logo">

然后有可点击的元素，将显示所有网页或所有印刷或所有徽标，但不显示其他内容。

我尝试过这个解决方案（这让我进入了上面的第一次迭代） https://www.sitepoint.com/community/t/toggle-hide-show-multiple-sections/381680/11

但我的理由是我目前有 8 个类别，并且可能会添加。输出 8 个关于客户端是 Web、印刷、徽标还是其他 5 个类别之一的查询似乎效率相当低。

因此，如果我可以将每个徽标上的每个类别的类（或 ID）输出一次，则页面将缩小 8 倍。

Answer 1

有了你想要的 HTML 结构后，你可以试试这个：

<button onclick="filterByCategory('web')">Show Web</button>
<button onclick="filterByCategory('print')">Show Print</button>
<button onclick="filterByCategory('logo')">Show Logo</button>
<button onclick="showAll()">Show All</button>
    
<script>
    function filterByCategory(category) {
        // Hide all images
        var images = document.querySelectorAll('img');
        images.forEach(function(img) {
            img.style.display = 'none';
        });
    
        // Show images with the specified category
        var selectedImages = document.querySelectorAll('.' + category);
        selectedImages.forEach(function(img) {
            img.style.display = 'block';
        });
    }
    
    function showAll() {
        // Show all images
        var images = document.querySelectorAll('img');
        images.forEach(function(img) {
            img.style.display = 'block';
        });
    }
</script>

将其包装到您的 HTML 中。

我认为这符合你的要求。