Question

我正在开发我的第一个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中实现它的任何方法。任何帮助都将非常感激。谢谢。

Answer 1

感谢您的帮助，这个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

Answer 2

是的你可以用简单的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>

根据AMP中的选择选项有条件地显示/隐藏div

2 个答案: