基于JavaScript和Twig实现复选框控制图库项显隐的问题求助

你的JavaScript代码存在几个关键问题，导致筛选功能无法正常工作，以下是问题分析和修正后的代码：

原代码的错误点 #

• DOM选择器错误：document.getElementsByTagName("input")返回的是HTMLCollection，不能直接调用querySelectorAll方法，应该直接用querySelectorAll获取目标复选框。
• 循环条件错误：for (i=0; i<liNames; i++)里的liNames是NodeList对象，不是长度数值，应该用liNames.length。
• 变量拼写错误：ckeckButton是checkButton的拼写错误，导致无法正确访问复选框元素。
• 样式值未加引号：block和none是字符串，需要用双引号包裹，否则会被当作未定义变量。
• 逻辑错误：原逻辑试图将每个li和对应索引的checkbox绑定，但实际应该先收集所有选中的分类slug，再逐个判断每个图库项是否属于选中分类。

修正后的代码 #

<div class="gallery">
    {% for p in page.collection %}
        {% if p.header.button %}
            <input type="checkbox" id="{{ p.slug }}" data-id-slug="{{ p.slug }}" class="gallery-label" onclick="opengallery()">
            <label for="{{ p.slug }}">{{ p.title }}</label>
        {% endif %}
    {% endfor %}

    <ul>
        {% for p in page.collection|randomize %}
            {% for image in p.media.images|randomize %}
                <li class="gallery-content" data-id-name="{{p.slug}}">
                    {{ image.lightbox.cropResize(360, 200).html()|raw }}
                </li>
            {% endfor %}
        {% endfor %}
    </ul>
</div>

<script>
function opengallery() {
    // 获取所有带data-id-slug的复选框
    const checkboxes = document.querySelectorAll('input.gallery-label[data-id-slug]');
    // 获取所有图库项
    const galleryItems = document.querySelectorAll('.gallery-content[data-id-name]');
    
    // 收集所有选中的slug
    const selectedSlugs = Array.from(checkboxes)
        .filter(checkbox => checkbox.checked)
        .map(checkbox => checkbox.dataset.idSlug);

    // 遍历每个图库项，判断是否显示
    galleryItems.forEach(item => {
        const itemSlug = item.dataset.idName;
        // 如果没有选中任何复选框，或者当前项的slug在选中列表中，就显示，否则隐藏
        if (selectedSlugs.length === 0 || selectedSlugs.includes(itemSlug)) {
            item.style.display = "block";
        } else {
            item.style.display = "none";
        }
    });
}
</script>

额外优化说明 #

• 给复选框添加了<label>标签，点击标题也能勾选复选框，提升用户体验。
• 使用forEach替代for循环，代码更简洁易读。
• 增加了“无选中时显示所有内容”的逻辑，符合常规图库筛选的交互预期。

内容的提问来源于stack exchange，提问作者Povrrrrr