Question

我在AMP上有这个代码：

<style amp-custom>

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

  .plus {background-color: blue;}
  .mius {background-color: green;}

  .visible {
    width: 50px;
    height: 50px;
    background-color: blue;
    display:block;
  }

  .no-visible {
    display: none;
  }

</style>
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
<body>
  <amp-state id="text">
   <script type="application/json">
   {
      "textspan1": "plus",
      "textspan2": "visible"
   }
   </script>
  </amp-state>

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

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

    <p [class]="textspan2=='no-visible'?'visible':'no-visible'" class="plus"></p>
    <button on="tap:AMP.setState({textspan2: (textspan2 == 'visible' ? 'no-visible':'visible')})">pulsa visible</button>

 </body>
</head>

</html>

当我点击一个按钮（我不介意点击的按钮）时，执行它们的两种状态。只有我想要的是点击一个按钮，我执行一个状态，没有两个。

单击带有AMP.setState的按钮时，两个属性会发生变化。 AMP-BIND

0 个答案: