Amp html AMP-要显示/隐藏的多个按钮

Amp html AMP-要显示/隐藏的多个按钮,amp-html,amp-bind,Amp Html,Amp Bind,我想改变两个按钮的状态。 但如果我按下一个按钮,两个都会消失。 按钮1应切换到按钮2(反之亦然) 和 按钮3至按钮4(反之亦然) 但如果我按下一个按钮,另一个就会消失 <section> <button class="button1 show" [class]="button1 ? 'button1 show' : 'button1 hide'" on="tap:AMP.setState({butto

我想改变两个按钮的状态。 但如果我按下一个按钮,两个都会消失。 按钮1应切换到按钮2(反之亦然) 和 按钮3至按钮4(反之亦然) 但如果我按下一个按钮,另一个就会消失

    <section>
        <button 
        class="button1 show" 
        [class]="button1 ? 'button1 show' : 'button1 hide'" 
        on="tap:AMP.setState({button1: visible, button2: !visible})">
        <span class="">Button 1</span>
        </button>

        <button 
        class="button2 hide" 
        [class]="button2 ? 'button2 show' : 'button2 hide'" 
        on="tap:AMP.setState({button1: !visible , button2: visible})">
        <span class="">Button 2</span>
        </button>
</section>



<section>
        <button 
        class="button3 show2" 
        [class]="button3 ? 'button3 show2' : 'button3 hide2'" 
        on="tap:AMP.setState({button3: visible, button4: !visible})">
        <span class="">Button 3</span>
        </button>

        <button 
        class="button4 hide2" 
        [class]="button4 ? 'button4 show2' : 'button4 hide2'" 
        on="tap:AMP.setState({button3: !visible , button4: visible})">
        <span class="">Button 4</span>
        </button>
</section>

按钮1
按钮2
按钮3
按钮4

看看这个JSBin,它展示了实现上述目标的3种方法。您还可以将
#development=1
添加到URL的末尾,进入调试模式,然后在浏览器控制台中输入
AMP.printState()
,查看您的实际状态。