AMP多按钮显隐切换异常求助：点击按钮后对应组按钮双双消失

我看了你的代码，问题出在状态变量的复用和逻辑错误上，导致点击后状态混乱，按钮全部消失。咱们一步步来修正：

问题根源 #

1. 你在AMP.setState里使用了visible这个未定义的全局变量，两组按钮都在操作它，状态完全乱套了
2. 类绑定的写法有问题，而且初始的class属性和[class]绑定冲突，会导致样式覆盖异常
3. 没有在<amp-state>里初始化状态，AMP需要明确的初始状态值来渲染

修正后的代码 #

首先，我们给每组按钮分配独立的状态变量，用单个变量控制一组的互显（因为一组里两个按钮是互斥的，一个显示另一个必然隐藏）：

<!-- 先定义初始状态 -->
<amp-state id="buttonState">
  <script type="application/json">
    {
      "showGroup1": true, // 初始显示Button1，隐藏Button2
      "showGroup2": true  // 初始显示Button3，隐藏Button4
    }
  </script>
</amp-state>

<section>
  <!-- Button1：当showGroup1为true时显示，点击后切换为false -->
  <button 
    class="button1" 
    [class.show]="buttonState.showGroup1"
    [class.hide]="!buttonState.showGroup1"
    on="tap:AMP.setState({buttonState: {showGroup1: false}})"
  >
    <span>Button 1</span>
  </button>
  <!-- Button2：当showGroup1为false时显示，点击后切换为true -->
  <button 
    class="button2" 
    [class.show]="!buttonState.showGroup1"
    [class.hide]="buttonState.showGroup1"
    on="tap:AMP.setState({buttonState: {showGroup1: true}})"
  >
    <span>Button 2</span>
  </button>
</section>

<section>
  <!-- Button3：当showGroup2为true时显示，点击后切换为false -->
  <button 
    class="button3" 
    [class.show2]="buttonState.showGroup2"
    [class.hide2]="!buttonState.showGroup2"
    on="tap:AMP.setState({buttonState: {showGroup2: false}})"
  >
    <span>Button 3</span>
  </button>
  <!-- Button4：当showGroup2为false时显示，点击后切换为true -->
  <button 
    class="button4" 
    [class.show2]="!buttonState.showGroup2"
    [class.hide2]="buttonState.showGroup2"
    on="tap:AMP.setState({buttonState: {showGroup2: true}})"
  >
    <span>Button 4</span>
  </button>
</section>

<!-- 别忘了加对应的CSS样式 -->
<style amp-custom>
  .button1, .button2, .button3, .button4 {
    /* 基础按钮样式 */
    padding: 8px 16px;
    border: none;
    cursor: pointer;
  }
  .hide, .hide2 {
    display: none;
  }
  .show, .show2 {
    display: inline-block;
  }
</style>

关键改动说明 #

• 独立状态变量：用buttonState.showGroup1控制第一组，buttonState.showGroup2控制第二组，两组完全独立，不会互相干扰
• 清晰的类绑定：用[class.show]这种AMP推荐的条件类绑定方式，比拼接类名更直观，避免冲突
• 明确初始状态：在<amp-state>里定义初始值，确保页面加载时按钮的显隐状态正确
• 简化逻辑：每组只用一个布尔变量控制，因为两个按钮是互斥的，不用分别维护两个变量，减少出错概率

这样修改后，点击Button1就会隐藏自己显示Button2，点击Button2则反过来；第二组的Button3和Button4也是同样的互切逻辑，不会出现全部消失的问题了。

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