AMP tap event 改變value屬性的內容

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的屬性， 文檔中沒有提及。 但是，如果您要擁有多個按鈕，那么您可以直接在設置狀態中為每個按鈕設置值。

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