有条件地隐藏或显示输入 - 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">

我已经尝试在 <option> 标签内使用 "on" attribute：

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

但它不起作用，它只在 <select> 标签上有效，即使 documentation 说 "All elements"。

我需要使用 <select> 和 <option> 标签，因为有很多国家而不仅仅是 2 个，否则使用单选输入 "on" 属性将起作用。

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

希望大家帮帮忙！谢谢！

Answer 1

您可以在 select 元素上使用 change 事件，测试所选的值，并根据该值设置 AMP 状态属性 visibility 到值 show 或 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>

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

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

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

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

Conditionally hide or show inputs - AMP

amp-html