0

我有这个代码：

 <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>

我想改变状态

当单击按钮时，它会发生一次。我的意思是，如果我点击一次

颜色改变了，但是当我第二次点击时颜色没有改变。

您是否有任何想法在单击按钮时一直更改颜色？

4

3 回答 3

4

你也可以这样做：

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

每次单击时，状态都会自我否定。

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

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

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

于 2019-08-27T15:36:12.823 回答
0

我找到了解决方案。只需删除 p 标签上的对象“文本”。见下文：

   <p [text]="textspan1=='plus'?'mius':'plus'" 
      [class]="textspan1=='plus'?'mius':'plus'" class="plus"></p>
于 2018-01-08T16:26:20.217 回答
-3

这段代码会起作用吗？

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>

于 2018-01-08T12:52:22.530 回答