С помощью AMP HTML можно ли получить идентификатор или другие свойства из элемента, по которому щелкнули, добавить их и создать URL для тега привязки? - PullRequest
Новая
       19

С помощью AMP HTML можно ли получить идентификатор или другие свойства из элемента, по которому щелкнули, добавить их и создать URL для тега привязки?

0 голосов
/ 21 мая 2019

У меня есть набор проверки ввода.Каждый из них содержит уникальный идентификатор.При установке флажка (при щелчке) я хочу получить этот идентификатор и создать строку типа '/ some / path /? Myids = checkOne, checkTwo (где checkOne и checkTwo - это идентификаторы двух разных входных проверок, по которым был выполнен щелчок.

Я понимаю, что могу использовать управление состоянием, но моя проблема заключается в следующем: как я могу ограничить количество флажков для создания настраиваемой строки? Например, я хочу иметь ограничение в 5 идентификаторов, разделенных запятыми. Так как логика AMPограниченный Я не уверен, как сделать сложную логику с ним.

Вот шаги:

  1. показать набор флажков.
  2. пользователь может нажать любой из этихфлажки
  3. , когда пользователь нажимает на флажок, необходимо обновить ач-тег href = ..., добавив подстроку? myids = checkOne.
  4. , если пользователь нажимает на другой флажок, то hrefтег должен быть обновлен до следующего:? myids = checkOne, checkTwo и т. д., пока не будет выбрано не более 5 флажков.

Возможно ли это вообще? Спасибо

Документация естьне очень ясноАргументы о том, как приблизиться к сложной логике, и мало что найдено при поиске.

1 Ответ

0 голосов
/ 22 мая 2019

Один из вариантов - использовать amp-selector, а затем ограничить количество выбранных элементов при связывании, используя .slice(): 

<amp-state id="selected">
  <script type="application/json">[]</script>
</amp-state>

<amp-selector layout="container" multiple on="select:AMP.setState({selected: event.selectedOptions})">
  <div option="1">First</div>
  <div option="2">Second</div>
  <div option="3">Third</div>
</amp-selector>

<div hidden [hidden]="selected.length < 3">You can only select two options.</div>
<a href="/?ids=" [href]="'/?ids=' + selected.slice(0, 2)">Click me</a>

Это ограничиваетКоличество выбранных идентификаторов до двух и отображает предупреждение, если пользователь выбрал все три.

...