gpt4 book ai didi

amp-html - 如何将 amp-selector 的文本内容设置为 amp-state

转载 作者:行者123 更新时间:2023-12-02 21:51:59 39 4
gpt4 key购买 nike

我想知道如何根据用户选择的选项获取文本内容并将其设置为amp-state。例如,如果用户选择“红色”选项。我想将“胭脂”设置为 amp-state 而不是“红色”。我知道我可以通过 setState 函数内的 event.targetOption 获取 value 。但是,无法找到如何获取文本并将其设置到 amp-state 中。

<amp-state id="selectedColor">
<script type="application/json">
{
"value": ""
}
</script>
</amp-state>

<p>Selected Color <span [text]="selectedColor.value"></span></p>

<amp-selector
layout="container"
on="select:AMP.setState({
selectedColor: {
value: event.targetOption
}
})">
<div option="red">rouge</div> <!-- user select this -->
<div option="blue">bleu</div>
<div option="green">vert</div>
</amp-selector>

我的预期输出如下

<p>Selected Color <span>rouge</span></p>

不是

<p>Selected Color <span>red</span></p>

最佳答案

你可以这样做:

<!-- 1. Initialize colorMap -->
<amp-state id="colorMap">
<script type="application/json">
{
"red": "rouge",
"blue": "bleu",
"green": "vert"
}
</script>
</amp-state>

<!-- 2. On select: set new state of selectedColor -->
<amp-selector
layout="container"
on="select:AMP.setState({selectedColor: event.targetOption})">
<div option="red">rouge</div>
<div option="blue">bleu</div>
<div option="green">vert</div>
</amp-selector>

<!-- 3. Bind the selectedColor value as identifier for the colorMap -->
<p>Selected Color <span [text]="colorMap[selectedColor]"></span></p>
  1. 初始化colorMap按照预定义<amp-state>
  2. 选择时:设置 selectedColor 的新状态作为单个字符串(不是具有键:值的对象)
  3. 绑定(bind)selectedColor值作为 colorMap 的标识符

请注意,颜色图和选择器的值必须相同。我更喜欢使用模板引擎。

关于amp-html - 如何将 amp-selector 的文本内容设置为 amp-state,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57667196/

39 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com