amp bind 使用按钮更改状态

Question

我有这个代码：

 <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({textspan1: (textspan1 == 'plus' ? 'mius' : 
    'plus')})">puls</button>

</body>

我想在单击按钮时更改

的状态，但只发生了一次。我的意思是，如果我点击一次

，颜色会改变，但当我点击第二次时，颜色不会改变。

你有没有想过点击按钮时一直改变颜色？

Answer 1

此代码有效吗？

function changeColor() {
  runFunction0 = runFunction;
  runFunction = runFunction0 + 1;

  if (runFunction / 2 != Math.round(runFunction / 2)) {
    document.getElementById("area").className = "mius";
  } else
  if (runFunction / 2 == Math.round(runFunction / 2)) {
    document.getElementById("area").className = "plus";
  }

}

var runFunction0
var runFunction = 0;

.plus,
.mius {
  width: 50px;
  height: 50px;
}

.plus {
  background-color: blue;
}

.mius {
  background-color: green;
}

<body>
  <amp-state id="text">
    <script type="application/json">
      {
        "textspan1": "plus"
      }
    </script>
  </amp-state>

  <p id="area" [text]="text.textspan1=='plus'?'mius':'plus'" [class]="text.textspan1=='plus'?'mius':'plus'" class="plus"></p>

  <button on="tap:AMP.setState({textspan1: (textspan1 == 'plus' ? 'mius' : 
    'plus')})" onclick="changeColor();">puls</button>

</body>

Answer 2

我找到了解决方案。只需删除 p 标签上的对象 'text' 即可。见下文：

   <p [text]="textspan1=='plus'?'mius':'plus'" 
      [class]="textspan1=='plus'?'mius':'plus'" class="plus"></p>

Answer 3

你也可以这样做：

<button on="tap:AMP.setState({toggled: !toggled})">toggle</button>

每次点击状态都会自我否定。

然后你可以像布尔变量一样听状态并绑定你的类或文本或任何其他可能的东西。

<p [text]="toggled ? 'mius' : 'plus'" 
   [class]="toggled ? 'mius' : 'plus'" class="plus">plus</p>

注意：您不必使用 <amp-state> 标记来初始化每个状态。仅当您需要在没有任何交互的情况下访问存储的值时才有必要。

amp bind 使用按钮更改状态

amp bind change state with button

html

css

amp-html

amp-bind