有条件地隐藏或显示输入 - AMP

Question

我正在尝试使用 Accelerated Mobile Pages (AMP) 构建表单，我需要根据用户选择隐藏或显示输入。

我有一个<select>用户可以选择国家的地方：

<select name="country" id="country" required>
    <option value="UK">United Kingdom</option>
    <option value="ES">Spain</option>
</select>

如果用户选择英国，我想隐藏此输入：

<input type="text" id="idcard" name="idcard">
<input type="text" id="mobile" name="mobile">

我已经尝试在标签内使用“on”属性<option>：

<option value="UK" on="tap:idcard.hide,mobile.hide">United Kingdom</option>

但它不起作用，它只在<select>标签上有效，即使文档说“所有元素”。

我需要使用<select>和<option>标记，因为有很多国家，而不仅仅是 2 个，否则使用收音机输入“on”属性会起作用。

是否有任何类型的触发器或事件可用于根据用户选择隐藏或显示输入？

希望任何人都可以提供帮助！谢谢！

Answer 1

您可以change在select元素上使用该事件，并测试所选的值，并根据该值将 AMP 状态属性设置visibility为 valueshow或hide如下所示：

<select name="country" id="country" required
        on="change:AMP.setState({visibility: event.value=='ES'?'hide':'show'})">
 <option value="UK" >UK</option>
 <option value="ES" >Spain</option>
</select>

然后将输入的类绑定到可见性的值：

<input type="text" id="idcard" name="idcard" 
       class="show"
       [class]="visibility||'show'">
<input type="text" id="mobile" name="mobile"
       class="show"
       [class]="visibility||'show'">

然后你只需要 CSS 类：

<style amp-custom>
  .hide {display: none;}
</style>

您将需要包含 amp-bind 组件：

<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>