我在 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>
当我单击一个按钮(我不介意单击的按钮)时,执行它们的两种状态。只有我想要的是点击一个按钮,我执行一个状态,没有两个。