如何正确地将值保存到我的数据属性中？

Question

我无法将一些值（通过 for loop 获得）保存到 HTML button 作为按钮 data- attributes。

在下面的 for loop 代码中，您会注意到我如何指示 console 登出已成功捕获这些值。为什么我无法将它们保存在按钮中 data-attributes 谁能指出我哪里出错了？

在下面找到我的 for loop 代码及其成功的 console log 结果：

contractMethods.viewAllGifts().call( (error, result)=> {
  if(!error){
      result.forEach((item, index)=>{
        console.log("item.tokenId: " +item.tokenId);
        console.log("item.messageToRecipient: " +item.messageToRecipient);
        $('#assetInheritor').append('<button type="button" value=' + item.tokenId + ' ' + 'data-value1=' + item.messageToRecipient + ' ' + ' onclick="fetchValue(this)"> ' + item.tokenId + '</button>  ');
      })
   } 
})

上面代码中的console，成功登出：

item.tokenId: 100
item.messageToRecipient: I love you Mamma!

在下面找到 onclick="fetchValue() 的代码及其错误结果：

function fetchValue(_button){  
  console.log(_button.value);
  console.log(_button.dataset.value1)
  
}

第一个 console 注销：100，而不是：100

而第二个 console 注销：I 而不是：我爱你妈妈！

有人可以指出我哪里错了吗？

谢谢第二个

Answer 1

我看到你的问题是你每次都为单个按钮添加一个按钮。不要像那样设置按钮，而是在附加按钮后使用 attr 设置属性：

// Dummy data
const result = [
  {
    tokenId: 100,
    messageToRecipient: "Message 1",
  },
  {
    tokenId: 101,
    messageToRecipient: "Message 2",
  }
]


// updated forEach
result.forEach((item, index)=>{
  $('#assetInheritor').append(`<button id="button-${index}" onclick="fetchValue(this)">Button ${index + 1}</button> <br/> <br/>`);
  $(`#button-${index}`).attr("data-value1", item.tokenId);
  $(`#button-${index}`).attr("data-value2", item.messageToRecipient);

})

// updated function
function fetchValue(_button){  
  console.log(_button.dataset.value1);
  console.log(_button.dataset.value2)
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="assetInheritor"></div>

如何正确地将值保存到我的数据属性中？

How do I correctly save values into my data- attributes?

html

javascript

custom-data-attribute