时间戳

首页 > 解决方案 > 将数组的单个元素传递给点击函数？

javascript - 将数组的单个元素传递给点击函数？

问题描述

我有一个从服务器收到的对象，我想以某种方式显示。我正在努力的是将单个元素传递给单个按钮。在网页上，我将显示与单人播放器和按钮相关的内容列表。我想做的是，如果我点击某个玩家的按钮，我想传递与该对象相关的信息。但是javascript说我有一个意外的标识符作为错误。单击该按钮时，如何传递数组的单个对象？

[
    {"player":"something", "help":"", "secOnTask":12}, 
    {"player":"ran", "help":"", "secOnTask":13}
]

function trialtry(player) {
    alert('hello');
    console.log(player);
}

//function that receives object players from the server
function setTPlayerTemplate(players) {
    var playerHtml = [];
    for (let index = 0; index < players.length; index++) {
        playerHtml[index] = 
            '<div class = "user">\
                <button onclick="trialtry('+players[index]+')">'+players[index].player+'</button>\
                <ul class="list-group">\
                    <li class="list-group-item">Time: '+players[index].secOnTask+'</li>\
                </ul>\
            </div>'
    }
    return playerHtml;
}

标签： javascripthtmlparameter-passing

解决方案

通过这样做'...' + players[index] + '...'，您实际上是将对象转换为字符串。如果您的players变量是全局变量，您只需将变量名称插入 html：

playerHtml[index] = '<div class = "user">\
            <button onclick="trialtry(players[index])">' + // Note here there are no ''
 players[index].player+'</button>\
             <ul class="list-group">\
             <li class="list-group-item">Time: '+players[index].secOnTask+'</li>\
            </ul>\
            </div> '

否则（最好）你可以创建你的元素结构（使用 vanilla 或库）并将你的变量注入到按钮回调中。

香草会是这样的：

function createPlayerElement(player) {
  var $user = document.createElement('div');
  $user.classList.add('user');

  var $button = document.createElement('button');
  button.addEventListener('click', function() { trialtry(player); });
  button.innerText = player.player;

  var $ul = document.createElement('ul');
  $ul.classList.add('list-group');

  var $li = document.createElement('li');
  $li.classList.add('list-group-item');
  $li.innerText = 'Time: ' + player.secOnTask;

  $ul.appendChild($li);
  $user.appendChild($button);
  $user.appendChild($ul);

  return $user;

}

function setTPlayerTemplate(players) {
        var playerHtml = [];
        for (let index = 0; index < players.length; index++) {
            playerElements.push(createPlayerElement(players[i]));
        }
        // Here we don't return flat HTML but the elements to be appended to your container
        return playerHtml; 
}

推荐阅读