是否可以将多个值保存到一个按钮？

Question

传统上，按钮被设计为仅保存一个单个值，例如：

<button type="button" value="Love" onclick="fetchValue(this)"> Primary </button>

function fetchValue(_button){  
  alert(_button.value);
}

例如，在上面的HTML代码中，当用户单击Primary按钮，就会弹出带有爱字样的提醒！

出于（UI/UX）用户界面/体验的目的，我需要设计一个可以容纳多个值而不仅仅是一个值的按钮。这是因为我计划将点击事件耦合到按钮以发送/发布所有存储的值。

非常想要的代码类似于下面的代码：

<button type="button" value="Love", value2="Love", 
value3="Love" onclick="fetchValue(this)"> Primary </button>

是否有人知道如何解决这个问题，甚至知道如何更好地解决我的问题？

提前致谢

Answer 1

您可以将它们存储为数据集值

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

}

Answer 2

您可以使用 data 属性来获取其他值。

function fetchValue(_button){  
  alert(`${_button.value} ${_button.dataset.value2}`);
}

<button type="button" value="Love" data-value2="you" onclick="fetchValue(this)"> Primary </button>

Answer 3

您可以使用查找表来避免 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>

Answer 4

您可以轻松地使用数据集为按钮设置多个值，而不是使用传统的值属性。如果您使用 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>

如果您想同时获取所有呈现的值，您只需使用 up fetchValue() 函数内的 .map() 函数即可。

let allValues = _button.dataset.map((value) => {
  return `${value} `;
});

console.log(`All values are: ${allValues}`);