AMP绑定按钮切换状态异常：仅单次生效的解决咨询

我看了你的代码，问题出在AMP.setState的状态引用方式和一处小语法错误上，导致只能触发一次切换。咱们一步步来修正：

1. 核心错误：状态变量的访问路径不对 #

你的amp-state的id是text，里面的变量textspan1是嵌套在这个对象里的。但你在按钮的tap事件里直接写了textspan1 == 'plus'，这里的textspan1没有正确关联到text这个state对象，所以第一次切换后，后续的判断就找不到正确的当前值了，自然没法继续切换。

2. 次要错误：多余的括号 #

按钮的on属性最后多了一个闭合括号，这属于语法错误，虽然第一次可能能触发，但会影响后续的事件处理。

修正后的完整代码 #

<style amp-custom>
  .plus, .mius { 
    width: 50px; 
    height: 50px; 
  } 
  .plus {background-color: blue;} 
  .mius {background-color: green;} 
</style> 
<body> 
  <amp-state id="text"> 
    <script type="application/json">
      { "textspan1": "plus" }
    </script> 
  </amp-state> 
  <p [text]="text.textspan1=='plus'?'mius':'plus'" [class]="text.textspan1=='plus'?'mius':'plus'" class="plus"></p> 
  <button on="tap:AMP.setState({text: {textspan1: (text.textspan1 == 'plus' ? 'mius' : 'plus')}})">plus</button> 
</body>

关键改动说明 #

• 在AMP.setState里，我们需要更新的是text对象下的textspan1，所以写法是{text: {textspan1: ...}}
• 判断当前值的时候，要使用text.textspan1来获取amp-state里的当前状态，这样每次点击都能正确读取到最新的状态值，实现循环切换
• 去掉了按钮on属性末尾多余的括号，同时把按钮文字puls修正为plus（这个是可选的，只是语义更准确）

现在点击按钮就能持续切换元素的颜色和文本啦！

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