Question

您好！

我正在使用amp-bind方法。我跟踪点击按钮。我打电话给模态窗口。这一切都没关系。接下来，我想更改输入值属性的内容。从触发事件的按钮中获取值。

我的代码：

.amp-lightbox {
  background: rgba(0, 0, 0, 0.8);
}

.amp-lightbox__content {
  background-color: #fff;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  left: 50%;
  max-width: 550px;
  width: 90%;
}

<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
<script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script>

<amp-lightbox id="amp-lightbox" layout="nodisplay" class="amp-lightbox">
  <div class="amp-lightbox__content">
    <form id="form-modal" action-xhr="amp-mail.php" target="_top" method="post">
      <input type="text" name="id" [value]="customvalue">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </form>
  </div>
</amp-lightbox>

<button value="2654" on="tap:amp-lightbox, AMP.setState({customvalue: event.value})" class="button">Order</button>

我将有许多按钮和一个模态窗口。我需要从导致事件的按钮中获取一个值，并将其写入模态窗口元素。 我该怎么做？

非常感谢您提前！

Answer 1

我不确定您是否可以使用value作为button的属性docs中没有提及。但是，如果您要使用多个按钮，则可以直接为每个按钮设置设置状态值。

.amp-lightbox {
  background: rgba(0, 0, 0, 0.8);
}

.amp-lightbox__content {
  background-color: #fff;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  left: 50%;
  max-width: 550px;
  width: 90%;
}

<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
<script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script>

<amp-lightbox id="amp-lightbox" layout="nodisplay" class="amp-lightbox">
  <div class="amp-lightbox__content">
    <form id="form-modal" action-xhr="amp-mail.php" target="_top" method="post">
      <input type="text" name="id" [value]="customvalue">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </form>
  </div>
</amp-lightbox>

<button on="tap:amp-lightbox, AMP.setState({customvalue: '2654'})" class="button">Order 2654</button>

<button on="tap:amp-lightbox, AMP.setState({customvalue: '2655'})" class="button">Order 2655</button>

<button on="tap:amp-lightbox, AMP.setState({customvalue: '2656'})" class="button">Order 2656</button>

Answer 2

要获取按钮（或其他单击元素）的值，请使用以下代码：

<button id="test" value="1234" onclick="recover(value,id)">Lorem</button>
<script>
  function recover(value,id) {
    alert(value);
    document.getElementById(id).value = "Your value HERE";
  }
</script>

AMP tap事件更改value属性的内容

2 个答案: