如何使用href屬性來存儲元數據？

Question

我有一個href標籤，點擊後打開一個彈出窗口。

我想將附加信息存儲在href標籤中，以便我可以從彈出窗口中獲取該信息。

<a href="" class="js-stripe-button">Order</a> 

如果我想存儲以下信息，我可以存儲在href標籤本身嗎？

amount 
description 

我的jQuery目前的樣子：

$(".js-stripe-button").on("click", function(e){ 
    e.preventDefault(); 

    var amount = ??? 
    var description = ??? 
}(); 

是否有一個內置的方式，從點擊的元素獲取值？

Answer 1

您可以使用Data Attributes並存儲「任何東西」。

<a href="" class="js-stripe-button" data-amount="10" data-description="My Description">Order</a> 

然後用dataset

var amount = element.dataset.amount; 

Answer 2

爲什麼在使用數據屬性時將它存儲在href中？

<a href="" data-amount="" data-description="" class="myThing">Order</a> 

然後你可以檢索它是這樣的...

var a = document.querySelector('.myThing'); 

var amount = a.dataset.amount; 

var description = a.dataset.description; 

Answer 3

您可以在點擊的元素的.href串聯查詢字符串，請撥打window.open()上串

$(".js-stripe-button").on("click", function(e){ 
    e.preventDefault(); 

    var amount = ??? 
    var description = ??? 
    window.open(`${this.href}?amount=${amount}&description=${description}`); 
});