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

您还可以执行以下操作：

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

每次单击状态都会使自身无效。

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

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

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

Answer 2

此代码可以使用吗？

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 3

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

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

amp用按钮绑定更改状态

3 个答案: