时间戳

首页 > 解决方案 > 用户点击返回按钮后 AMP 重置所选选项

amp-html - 用户点击返回按钮后 AMP 重置所选选项

问题描述

我使用标准选择代码。在选择时，它会根据值显示另一个元素。

<select on="change:AMP.setState({ option: event.value })">
<option value="0" >choose</option>
<option value="9">blue</option>
<option value="10">brown</option>
<option value="11">green</option>
</select>

<a on="tap:AMP.setState({ klasa: 10101 })" rel="nofollow" class="button addtocart" hidden="" [hidden]="option != 9" href="/link1">link1</a>
<a on="tap:AMP.setState({ klasa: 10101 })" rel="nofollow" class="button addtocart" hidden="" [hidden]="option != 10" href="/link2">link2</a>
<a on="tap:AMP.setState({ klasa: 10101 })" rel="nofollow" class="button addtocart" hidden="" [hidden]="option != 11" href="/link3">link3</a>

我的问题：访问者可以选择选项，然后根据选择取消隐藏链接。单击链接后，用户转到另一个页面。点击后退按钮后，该选项仍然被选中（没关系），但是，所有按钮都被隐藏，就像选择了选项 0 一样。

我尝试在选项 0 上使用“已选择”，但在点击后退按钮后它不会保留。

谢谢你的帮助。

标签： amp-html

解决方案

每当用户单击“返回”按钮时，他们都会访问一个奇怪的浏览器缓存，该缓存会缓存输入、选择等表单元素。

select要反转它，请设置用户单击链接时的默认值。

您为变量分配其selectedOption值 1，然后[selected]amp-bind 属性会检查它，如果它高于0它将选择设置为choose就在用户重定向之前，因此当他们点击“返回”时，它处于默认状态。


  <select on="change:AMP.setState({ option: event.value })">
<option value="0" selected [selected]="selectedOption > 0 ">choose</option>
<option value="9">blue</option>
<option value="10">brown</option>
<option value="11">green</option>
</select>

<a on="tap:AMP.setState({ klasa: 10101, selectedOption: 1 })" 
   rel="nofollow" 
   class="button addtocart"  href="https://example.com"
   hidden="" 
   [hidden]="option != 9" >link1</a>
<a on="tap:AMP.setState({ klasa: 10101, selectedOption: 1 })" 
   rel="nofollow" class="button addtocart" href="https://example.com"
   hidden="" [hidden]="option != 10" >link2</a>
<a on="tap:AMP.setState({ klasa: 10101, selectedOption: 1 })" 
   rel="nofollow" 
   class="button addtocart" href="https://example.com"
   hidden="" [hidden]="option != 11" >link3</a>

我只设法让它在第一个“后退”按钮上工作，所以如果用户第一次点击“后退”，选择会刷新，如果他们点击两次，它不会，但希望它会帮助你。

推荐阅读