Question

如何使用AMP在单选按钮中选择的选项动态更改为 40,95€/ mes ？

<form id="myform" method="get" action-xhr="#" target="_top">
  <amp-selector class="radio-selector" layout="container" name="my-selector">
   <div class="background_gris_0" option="b">
      <label>
         <div class="clm1 left center_input">  
            <input name="answer1"
               value="Value 1"
               type="radio"
               on="change:myform.submit">
         </div>
         <div class="clm8 left">Antes 10GB* / AHORA 20GB / Llamadas  ilimitadas / 19,95€/mes</div>
      </label>
   </div>
   <div class="background_gris_1" option="c">
      <label>
         <div class="clm1 left center_input"><input name="answer1"
            value="Value 2"
            type="radio"
            on="change:myform.submit"></div>
         <div class="clm8 left">Antes 20GB* / AHORA 50GB / Llamadas  ilimitadas / 24,95€/mes</div>
      </label>
   </div>
  </amp-selector>
</form>

<div class="center">
  <h1> 40,95€/mes</h1>
</div>

JS Fiddle

Answer 1

这可以通过使用amp-bind组件来实现。首先，我建议您从功放选择器的单选按钮中删除所有更改事件。将“ myForm.submit”操作转移到amp-select的“ select”事件。

创建一个名为“ currentPrice”的状态变量。开头将为null。但是，当选择单选输入时，它将具有一个值并更新h1元素中的文本。

因此，在单选按钮中添加它（相应地更改currentPrice的值）：

on="tap:AMP.setState({currentPrice: '19,95€/mes'})"

然后，在h1元素中执行以下操作：

[text]="currentPrice"

因此，每当点击单选按钮时，底部的文本就会用价格更新。

您可以在这里看到jsfiddle：

Js Fiddle

为简单起见，我删除了表单提交事件。

动态AMP选择器

1 个答案: