Question

这是我目前的javascript代码：

props: {
  data_count: {
    type: [Number, undefined],
    required: true,
    validator:function (value) {
      if (!value) {
        return 1
      }
    }
  }
},

查看第一个函数，它正在做的是将单元格插入到我所拥有的HTML文件中，该文件用于显示有关事件的信息，使用从我的数据库收集的数据。这很好用，虽然我当前正在尝试做的是当我点击表中的其中一个事件时传入第二个函数，传入每个事件应该有的eventID。

每个事件的eventID号码也是从数据库中收集的，所以我现在要做的就是为每个事件添加一个onclick动作，该事件将运行＆＃34; GetEventInfo＆＃34;函数并传入相应的事件ID。到目前为止，我已经拿到了ID：

function GetEvents()
{   
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange  = function()
{
    if (this.readyState == 4 && this.status == 200) 
    {
        var eventObjects = JSON.parse(this.responseText);

        var table = document.getElementById("EventsTable"); //Gets the Table in the HTMl
        //Loops through the passed in array and adds each event in the table
        for(i = 0; i < eventObjects.length; i++)
        {
            var startDate = new Date(eventObjects[i].eventStart);
            var eventStart = startDate.getDate() + " / " + startDate.getMonth() + " / " + startDate.getFullYear();
            var ID  = eventObjects[i].eventID;

            var row = table.insertRow(1);
            var cell1 = row.insertCell(0);
            var cell2 = row.insertCell(1);
            var cell3 = row.insertCell(2);
            cell1.innerHTML = eventObjects[i].eventName;
            cell2.innerHTML = eventStart;
            cell3.addEventListener("click", function(){GetEventInfo(ID); });

            //Adds Image to third cell;
            var img = document.createElement('img');
            img.src = "EventIcon.png"
            cell3.appendChild(img); 
        }           
    }
}
xmlhttp.open("GET", "php/includes/GetEvents.php", true);
xmlhttp.send();
}

function GetEventInfo(eventID)
{
    alert(eventID);
}

然后我使用它来添加onclick操作：

var ID  = eventObjects[i].eventID;

这正确地解决了onclick的问题，当我点击它们时事件会运行该函数但我遇到的问题是传入的ID对于每个事件都是完全相同的，所以无论什么事件我点击它，它将始终打印出相同的事件ID，它不应该是，即eventID是第一个或最后一个事件。

有没有人知道为什么会这样？

Answer 1

所有var变量都会被提升 - 它具有函数范围，因此一旦所有迭代完成，每个ID都会引用您指定的 last ID。

对于翻译，它实际上看起来像这样：

xmlhttp.onreadystatechange  = function()
{
var ID;
// ...
// ...
  // <start for loop>
    ID  = eventObjects[i].eventID;
    // ...
    cell3.addEventListener("click", function(){GetEventInfo(ID); });

改为使用const：

const ID = eventObjects[i].eventID;

尽量不要使用var，它会使代码难以理解。请改用const和let，因为它们具有块范围且不会被提升。如果您必须支持不能识别ES2015语法的古老浏览器，请使用Babel将您的代码转换为ES2015 - 在您编写完之后。

带有insertCell问题的onclick事件 - Javascript

1 个答案: