我正在开发我的第一个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>
是的你可以用简单的jquery做到这一点。试试它会起作用。
<!DOCTYPE html>
<html>
<head>
<title>Try jQuery Online</title>
<style>
.selected {
color:red;
}
.highlight {
background:yellow;
}
</style>
</head>
<body>
<div class="ampstart-input" id="index">
<select name="product_type" id="product_type">
<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" >Content for product one</div>
<div class="loan" id="type_two">Content for product two</div>
<div class="loan" id="type_three">Content for product three</div>
<div class="loan" id="type_four">Content for product four</div>
</body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
alert("hello");
$('#product_type').on('change', function() {
$('.loan').each(function(i, obj) {
$(this).css('display','none');
});
var select_val = $("#product_type option:selected").val();
$("#"+select_val ).css('display','block');
});
});
</script>
</html>