AMP中通过tap事件隐藏指定class的所有div的实现方法

你原代码里的tap:box.hide是针对id为box的单个元素，要批量操作class为box的多个div，分两种场景处理：

普通HTML/JS场景 #

直接用JavaScript批量选中元素并修改样式，把按钮的事件改成调用自定义函数：

<button class="button" onclick="hideAllBoxes()">hide</button>

<div class="box">text</div>
<div class="box">text</div>

<script>
function hideAllBoxes() {
  // 选中所有class为box的元素
  const boxes = document.querySelectorAll('.box');
  // 遍历每个元素并隐藏
  boxes.forEach(box => {
    box.style.display = 'none';
    // 要是想保留元素占位，换成 box.style.visibility = 'hidden';
  });
}
</script>

• document.querySelectorAll('.box')能获取到所有class匹配的元素
• display: none会让元素完全消失不占空间，visibility: hidden则是隐藏但保留原有位置

AMP场景（适配你原代码的tap:语法） #

如果是用AMP框架，可借助状态管理批量控制元素显示：

<button class="button" on="tap:AMP.setState({ hideBoxes: true })">hide</button>

<div class="box" [hidden]="hideBoxes">text</div>
<div class="box" [hidden]="hideBoxes">text</div>

点击按钮后设置hideBoxes状态为true，所有绑定了[hidden]="hideBoxes"的div都会自动隐藏。

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