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

Question

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

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

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

例如，在上面的 HTML 代码中，当用户单击 Primary 按钮时，会出现带有 Love会弹出！

出于（UI/UX）用户 Interface/Experience 的目的，我需要设计一个可以容纳多个值并且 NOT 只能容纳一个值的按钮。这是因为我计划将 click 事件 耦合到 send/post all 存储值的按钮。

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

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

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

提前致谢

Answer 1

您可以使用 data 属性作为附加值。

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

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

Answer 2

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

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

您可以使用查找 table 以免弄乱 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}`);

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

Is it possible to save several values to a button?

html

javascript

button

dom-events