AMP輕擊事件更改值屬性的內容

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

爲了得到一個按鈕的值（或其他點擊的元素）使用此代碼：

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

Answer 2

我真的不知道，如果你可以使用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>