amp-html - 有条件地隐藏或显示输入 - 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" attribute里面 <option>标签:

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

但它不起作用，它仅在 <select> 上有效甚至标记 documentation说“所有元素”。

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

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

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

Answer 1

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

然后将输入的类绑定(bind)到可见性的值:

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