使用 JavaScript 和 Twig 根据复选框隐藏/显示项目，解决具体问题

javascript

2024-03-16 02:06:44

使用 JavaScript 和 Twig 根据复选框隐藏/显示项目

问题

假设你有一个项目库，其中项目来自不同的文件夹，每个文件夹都有一个 data-id-name 属性，该属性等于文件夹名称。此外，每个文件夹还会在列表中创建一个 input type="checkbox" 项目。

你的目标是使用 JavaScript 实现一个功能，当选中具有 id="markers" 的复选框时，该功能将隐藏所有不等于 data-id-name="markers" 的项目。

解决方法

以下步骤演示了如何实现这个功能：

选择复选框和项目：
- 使用 document.getElementsByTagName 选择页面上的所有复选框。
- 使用 querySelectorAll 选择具有 data-id-name 属性的项目列表。
循环检查复选框：
- 遍历复选框，检查哪些复选框已选中。
根据复选框状态显示/隐藏项目：
- 对于每个复选框，获取其 data-id-name 属性并将其与项目列表中的 data-id-name 属性进行比较。
- 如果属性匹配，则显示项目。否则，隐藏项目。

优化 JavaScript 代码

优化后的 JavaScript 代码如下：

function showHideItems() {
  const checkboxes = document.querySelectorAll('input[type="checkbox"]');
  const items = document.querySelectorAll('[data-id-name]');

  for (let i = 0; i < checkboxes.length; i++) {
    const checkbox = checkboxes[i];
    const itemName = checkbox.getAttribute('data-id-name');

    checkbox.addEventListener('change', () => {
      if (checkbox.checked) {
        showItems(itemName);
      } else {
        hideItems(itemName);
      }
    });
  }
}

function showItems(itemName) {
  const items = document.querySelectorAll(`[data-id-name="${itemName}"]`);

  for (let i = 0; i < items.length; i++) {
    items[i].style.display = 'block';
  }
}

function hideItems(itemName) {
  const items = document.querySelectorAll(`[data-id-name="${itemName}"]`);

  for (let i = 0; i < items.length; i++) {
    items[i].style.display = 'none';
  }
}

showHideItems();

更改 Twig 代码

在 Twig 代码中，需要修改按钮 input 元素以包含 data-id-name 属性，该属性对应于其文件夹名称。

完整示例

Twig 代码：

<div class="gallery">

    {% for p in page.collection %}
        {% if p.header.button %}
            <input type="checkbox" id="{{ p.slug }}" data-id-name="{{ p.slug }}" class="gallery-label">{{ p.title }}</input>
        {% 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>

JavaScript 代码：

function showHideItems() {
  const checkboxes = document.querySelectorAll('input[type="checkbox"]');
  const items = document.querySelectorAll('[data-id-name]');

  for (let i = 0; i < checkboxes.length; i++) {
    const checkbox = checkboxes[i];
    const itemName = checkbox.getAttribute('data-id-name');

    checkbox.addEventListener('change', () => {
      if (checkbox.checked) {
        showItems(itemName);
      } else {
        hideItems(itemName);
      }
    });
  }
}

function showItems(itemName) {
  const items = document.querySelectorAll(`[data-id-name="${itemName}"]`);

  for (let i = 0; i < items.length; i++) {
    items[i].style.display = 'block';
  }
}

function hideItems(itemName) {
  const items = document.querySelectorAll(`[data-id-name="${itemName}"]`);

  for (let i = 0; i < items.length; i++) {
    items[i].style.display = 'none';
  }
}

showHideItems();