-3

你好！

我正在使用 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>

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

非常感谢您！

4

2 回答 2

2

我不确定您是否可以将value其用作属性，因为文档button中没有提及。但是，如果您要拥有多个按钮，那么您可以直接在每个按钮的设置状态下设置值。

.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>

于 2017-10-20T04:39:28.690 回答
-6

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

<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>

于 2017-10-19T17:07:24.493 回答