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

Question

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

在下面for loop代码中，您会注意到我是如何指示console登录成功捕获这些值的。 为什么我不能将它们保存在按钮数据属性中有人可以指出我哪里出错了吗？

在下面找到我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>