Question

刚开始我已经在这里看过类似的问题，但没有一个真正让我朝着正确的方向前进。无论如何，我有一个问题，当我点击登录对象时，它不会发送我提供下面代码的函数selectPlayer。

function RenderFullAvatarCards(LoginData) 
{
      var avatarNumber = 0;
      $("#externalSystem").html('<center><div id="avatarCards" class="clickCard" style="margin-top:30px;"></div><br><div class="shadow"></div><div class="login-different" id="changePenguin">Change Penguin</div></center>');
    for (var i in LoginData['Accounts']) {
        $("#avatarCards").append('<div id="avatarCard_' + avatarNumber + '"  onclick="selectPlayer(' + i + ', ' + avatarNumber + ');" class="playerSelect"><div id="penguin" style="background:url(//localhost/play/assets/img/doll.png) no-repeat;position:relative;top:66px;width:144px;height:250px;"></div><span id="penguinName">' + LoginData['Accounts'][i][0] + '</span></div>');
        avatarNumber++;
    };
    $("#changePenguin").on('click', function() {
        renderNewPlayer(true);
    });
}

我收到的实际错误是

(index):1 Uncaught ReferenceError: Reed is not defined
    at HTMLDivElement.onclick ((index):1)

指的是索引的顶部，因为它以

开头

<!DOCTYPE html>

任何想法可能是什么问题？

Answer 1

如果我不得不猜测（我这样做是因为你没有提供足够的信息），你的LoginData对象看起来像

{
  Accounts: {
    Reed: ['Happy Feet']
  }
}

这里的问题是，因为i将是“Reed”值，您的内联onclick属性将类似于

onclick="selectPlayer(Reed, 0)"

由于未引用Reed，JavaScript正在寻找该名称的变量，因此......

未捕获的ReferenceError：未定义Reed

快速而肮脏的解决方案......添加引号

onclick="selectPlayer(\'' + i + '\', ' + avatarNumber + ')

更好的解决方案是向元素添加一些数据/属性，并使用委托事件侦听器来处理点击。例如

$(document).on('click', '.playerSelect', function() {
  let player = $(this)
  selectPlayer(player.data('account'), player.data('avatar-number'))
})

并在您的RenderFullAvatarCards函数中......

var avatarCards = Object.keys(LoginData.Accounts).map((account, avatarNumber) => {
  return $('<div></div>')
    .attr('id', 'avatarCard_' + avatarNumber)
    .data('account', account)
    .data('avatar-number', avatarNumber)
    .addClass('playerSelect')
    .append(...) // add span elements, etc
})
$("#avatarCards").append(avatarCards)

未在HTMLDivElement.onclick中定义

1 个答案: