javascript - 使用 AMP HTML，是否可以从单击的元素获取 ID 或其他属性，附加它们并为 anchor 标记创建 URL？

Question

我有一组检查输入。每个都包含一个唯一的 ID。在复选框(单击)上，我想获取此 ID 并创建一个类型为 '/some/path/?myids=checkOne,checkTwo 的字符串(其中 checkOne 和 checkTwo 是已单击的两个不同检查输入的 ID。

我知道我可以使用状态管理 - 但我的问题是:如何限制为其创建自定义字符串的复选框数量？例如，我希望限制为 5 个以逗号分隔的 ID。由于 AMP 逻辑有限，我不确定如何用它来处理复杂的逻辑。

步骤如下:

1. 显示一组复选框。
2. 用户可以点击这些复选框中的任何一个
3. 当用户点击复选框时，需要通过附加子字符串 ?myids=checkOne 来更新 achor 标签 href=...。
4. 如果用户点击另一个复选框，则 href 标签需要更新为:?myids=checkOne,checkTwo 等等，直到最多点击 5 个复选框。

这有可能吗？谢谢

关于如何近似复杂逻辑的文档不是很清楚，而且在搜索时也找不到很多。

Answer 1

一种选择是使用 amp-selector然后在使用 .slice() 绑定(bind)时限制所选元素的数量:

<amp-state id="selected">
  <script type="application/json">[]</script>
</amp-state>

<amp-selector layout="container" multiple on="select:AMP.setState({selected: event.selectedOptions})">
  <div option="1">First</div>
  <div option="2">Second</div>
  <div option="3">Third</div>
</amp-selector>

<div hidden [hidden]="selected.length < 3">You can only select two options.</div>
<a href="/?ids=" [href]="'/?ids=' + selected.slice(0, 2)">Click me</a>

这会将所选 ID 的数量限制为两个，如果用户选择了所有三个，则会显示警告。