如何使用复选框和 HTMX 过滤多个字段？

Question

我一直在学习 HTMX 与 MODX CMS、Tailwind 和 AlpineJS（我选择的武器）相结合，现在已经获得了一个基于 HTMX 的漂亮产品过滤器。

过滤器现在点击即可使用：

<input hx-get="product-list.html?color=blue" hx-trigger="click" hx-target="#pdopage" hx-swap="outerHTML" id="blue" name="blue[]" value="blue" type="checkbox">

hx-get

字段网址

product-list.html?color=blue

是在站点管理员添加或删除标签时由MODX CMS自动生成的。

在

product-list.html

页面上，我使用 CMS 加载 HTML 中的所有产品。添加的任何过滤器如：

?group1=tag1&group2=tag2

已经在前端工作，我计划使用 HTMX 和 AJAX 来获取这些过滤器。

我仍然无法上班：

• 我需要以某种方式“保存”已选择的任何过滤器，以便您可以按多个标签进行过滤。（当有人单击“颜色：蓝色”产品过滤器时，这现在可以工作，但是当他们单击“颜色：绿色”旁边时产品仅显示滤光片绿色，我们“失去”了蓝色）
• 此外，当您第二次单击复选框过滤器时，我需要能够“撤消”过滤器。

有人可以告诉我如何允许通过多个标签进行过滤吗？也许以某种方式用 JS 保存过滤器状态？或者是否有我不知道的原生 HTMX 选项？

使用JS在点击时保存点击的过滤器并将其添加到生成的URL中，但这不起作用。

Answer 1

要根据多个用户选择的标签过滤产品，您可以通过复选框元素上的每个

htmx

事件发送

change

请求，并使用

hx-include

包含其所有值。

为了避免代码重复，您可以将复选框包装在容器中，并将

htmx

属性放在那里（因为大多数事件都会冒泡到 HTML

body

）。

<div hx-get="product-list.html"
     hx-trigger="change from:body #blue,#green,#red"
     hx-swap="outerHTML"
     hx-target="#pdopage"
     hx-include="#blue,#green,#red">
    <input type="checkbox" id="blue" value="blue" name="blue[]">
    <input type="checkbox" id="green" value="green" name="green[]">
    <input type="checkbox" id="red" value="red" name="red[]">
</div>

然后在后端，您可以检索所选值并进行过滤。