条件付きでAMPの選択オプションに基づいてdivを表示/非表示

私は最初のAMPサイトを開発しています。複数のdivを表示/非表示にすることができるかどうかを知りたいと思います。条件付きで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でそれを達成する方法を見つけることができません。どんな助けも非常に高く評価されます。ありがとうございました。

出典

2017-12-07 Russ Jones

-1

はい簡単な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>

出典

2017-12-07 11:48:25

おかげで、私はAMPでこれをやろうとしている、とJavaScript/jQueryのまたは他の外部ライブラリやフレームワークは、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

出典

2017-12-20 15:34:42

条件付きでAMPの選択オプションに基づいてdivを表示/非表示

答えて

関連する問題