傳統上，按鈕設計為僅保存一個值，例如：
<button type="button" value="Love" onclick="fetchValue(this)"> Primary </button>
function fetchValue(_button){
alert(_button.value);
}
例如，在上面的HTML代碼中，當用戶點擊Primary按鈕時，會彈出一個帶有Love字樣的警報！
出于（UI/UX）用戶界面/體驗的目的，我需要設計一個可以容納多個值而不僅僅是一個值的按鈕。這是因為我計劃將點擊事件耦合到按鈕以發送/發布所有存盤的值。
非常需要的代碼類似于下面的代碼：
<button type="button" value="Love", value2="Love",
value3="Love" onclick="fetchValue(this)"> Primary </button>
有沒有人可能知道如何解決這個問題，甚至更好地解決我的問題？
提前致謝
uj5u.com熱心網友回復：
您可以將它們存盤為資料集值
<button value="love" data-value1="hate" data-value2="happy" onclick="fetchvalue(this)" >click me</button>
并像在 js 中一樣訪問它們
function fetchvalue(_button){
alert(_button.value)
alert(_button.dataset.value1)
alert(_button.dataset.value2)
}
或者以類似 json 的格式訪問它們
<button value={value1:"hate",value2:"happy" } onclick="fetchvalue(this)" >click me</button>
并像在 js 中一樣訪問它們
function fetchvalue(_button){
alert(_button.value.value1)
alert(_button.value.value2)
}
uj5u.com熱心網友回復：
您可以將data屬性用于附加值。
function fetchValue(_button){
alert(`${_button.value} ${_button.dataset.value2}`);
}<button type="button" value="Love" data-value2="you" onclick="fetchValue(this)"> Primary </button>uj5u.com熱心網友回復：
您可以使用查找表來避免 HTML 混亂
在這里我也委托事件監聽器
const values = {
"Love": ["Adore", "Be fond of"],
"Hate": ["Dislike", "Despise"]
};
document.getElementById("buttons").addEventListener("click", function(e) {
const button = e.target.closest("button");
if (button.matches(".fetchbutton")) console.log(values[button.value]);
})<div id="buttons">
<button type="button" value="Love" class="fetchbutton"> Love </button>
<button type="button" value="Hate" class="fetchbutton"> Hate </button>
</div>uj5u.com熱心網友回復：
您可以輕松地使用資料集為按鈕設定多個值，而不是使用傳統的 value 屬性。如果您使用data-attribute_name，那么您可以將所有資料集值作為單個 JS 物件訪問，然后您可以從那里選擇并重新格式化所有必需的值。例如
function fetchValue(_button){
// To get all value data as JS Object use _button.dataset
console.log("JS Object Data:\r\n")
console.log(_button.dataset)
// To get all value data as JSON use JSON.stringify(_button.dataset)
console.log("\r\n\r\nJSON Data:\r\n")
console.log(JSON.stringify(_button.dataset))
// To access the specific value you can use _button.dataset.name_here from data-name_here
console.log("\r\n\r\nSpecific Data:\r\n")
console.log(_button.dataset.value1)
console.log(_button.dataset.value2)
}<button data-value1="Something 1" data-value2="Something 2" data-value3="Something 3" onclick="fetchValue(this)">
Click Me
</button>如果您想將所有值呈現在一起，您可以簡單地使用.map()up 函式中的fetchValue()函式。
let allValues = _button.dataset.map((value) => {
return `${value} `;
});
console.log(`All values are: ${allValues}`);
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/442300.html
標籤：javascript html 按钮 dom 事件