我正在开发我的第一个 AMP 网站，想知道是否可以显示/隐藏多个 div：根据用户选择进行更改，就像这样。
<div class="ampstart-input" id="index">
<select name="product_type" id="product_type" required>
<option value="type_one">Type one</option>
<option value="type_two">Type two</option>
<option value="type_three">Type three</option>
<option value="type_four">Type four</option>
</select>
</div>
<div class="loan" id="type_one" hidden">Content for product one</div>
<div class="loan" id="type_two" hidden">Content for product two</div>
<div class="loan" id="type_three" hidden">Content for product three</div>
<div class="loan" id="type_four" hidden">Content for product four</div>
当用户更改选择字段时，我希望能够显示所选产品并隐藏其他产品（并可能隐藏原始选择 #index）。这在 JavaScript 中很熟悉也很简单，但我在 AMP 中找不到任何方法来实现它。任何帮助将不胜感激。谢谢你。
感谢您的帮助，这个 jsbin 解决了它。谢谢！
<!doctype html>
<html ?>
<head>
<meta charset="utf-8">
<title>My AMP Page</title>
<link rel="canonical" href="self.html" />
<meta name="viewport" content="width=device-width,minimum-scale=1">
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<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>
</head>
<body>
<select on="change:AMP.setState({ activeDiv: event.value })">
<option value=0></option>
<option value=1>Div 1</option>
<option value=2>Div 2</option>
</select>
<div hidden [hidden]="activeDiv != 1">
Div 1
</div>
<div hidden [hidden]="activeDiv != 2">
Div 2
</div>
</body>
</html>
https://jsbin.com/joxufigovo/edit?html,output
| 归档时间： |
|
| 查看次数： |
1524 次 |
| 最近记录： |