Onchange 基于AMP中的选择选项有条件地显示/隐藏div_Onchange_Amp Html

Onchange 基于AMP中的选择选项有条件地显示/隐藏div

amp-html

Onchange 基于AMP中的选择选项有条件地显示/隐藏div,onchange,amp-html,Onchange,Amp Html,我正在开发我的第一个AMP站点，我想知道是否有可能根据用户选择显示/隐藏多个div:change，就像这样 <div class="ampstart-input" id="index"> <select name="product_type" id="product_type" required> <option value="type_one">Type one</option> <option va

我正在开发我的第一个AMP站点，我想知道是否有可能根据用户选择显示/隐藏多个div:change，就像这样

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

当用户更改选择字段时，我希望能够显示所选产品，隐藏其他产品，并可能隐藏原始的选择索引。这在JavaScript中是熟悉和简单的，但我找不到任何方法在AMP中实现它。任何帮助都将不胜感激。谢谢。

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

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

谢谢，但我正试图在AMP中这样做，AMP不允许使用javascript/jquery或其他外部库和框架。谢谢您的回答，但AMP不支持jquery或任何javascript