如何使用 AMP 增加输入字段的值？

Question

我正在尝试在 AMP 中创建一个按钮，用于增加输入字段中的值。例如，您会在电子商务产品页面的数量 +- 选择器中看到什么。

我厌倦了查看 amp-bind 和 amp-script，其中 none 似乎完成了我认为如此简单的事情。

我的 AMP-HTML:

<button on="tap:AMP.setState({ value: value-1})">-</button>
<input name="qty" id="qty" type="number" min=1 [value]=1>
<button on="tap:AMP.setState({ value: value+1 })">+</button>

在正常情况下javascript：它会很简单：

document.getElementById("qty").value++;

感谢任何帮助

Answer 1

您当前的解决方案非常接近。唯一缺少的是更新输入上的 [value] 绑定以使用在单击按钮时修改的 AMP 状态变量。这将使值基于状态变量动态变化。

为清楚起见，我将您示例中的 amp-bind 变量重命名为 currentValue

<button on="tap:AMP.setState({ state: {currentValue: state.currentValue == 1 ? 1 : state.currentValue-1}})">-</button>
<input name="qty" id="qty" type="number" min=1 value=1 [value]="state.currentValue">
<button on="tap:AMP.setState({ state: {currentValue: state.currentValue+1 }})">+</button>
  
<amp-state id="state">
  <script type="application/json">
    {"currentValue": 1}
  </script>
</amp-state>

这是一个 full working example and the amp-bind documentation 也是一个很好的资源。

如何使用 AMP 增加输入字段的值？

How to Increment Value in Input field with AMP?

amp-html