通过创建的HTML代码调用函数

Question

编辑：

经过使用另一种方法（createElement）进行重新编写，我已经让我的代码能够正确调用元素，但它只使用了函数末尾创建的最后一个横幅的参数。以下是迄今为止的代码片段。

function load() {
 var staffB = ["Admin", "GM", "Dev", "FM", "Lore", "App", "Magic", "Event"];
 var table = document.createElement("table");
 for (var staffI = 0; staffI < staffB.length; staffI = staffI + 2) {
     var row = document.createElement("tr");
     var td = document.createElement("td");
     var td2 = document.createElement("td");
     var temp1 = staffB[staffI];
     var temp2 = staffB[staffI + 1];
     for (var i = 0; i < 10; i++) {
         td.innerHTML = '<img src=banners/' + staffB[staffI] + '.png height="auto" width="100%">';
         td.onclick = function() { select (temp1) }
         td2.innerHTML = '<img src=banners/' + staffB[staffI + 1] + '.png height="auto" width="100%">';
         td2.onclick = function() { select (temp2) }
     }
     row.appendChild(td);
     row.appendChild(td2);
     table.appendChild(row);
 }
 document.getElementById("staff").appendChild(table);
 }

第一次在这里发帖，提前为作为一个完全新手而道歉。

首先，我正在制作一个页面来组装类似中世纪的横幅，以供我所在社区使用，因此为了使将来添加/删除不同的横幅变得容易，我使用“for”制作了一个模块化的HTML系统。当创建它时，它会将访问文件的名称更改为数组中的名称，以便我只需更改列表并添加文件即可。它创建的HTML是一个表格，以便我可以用两列插入图像。

然后，该表格用于选择菜单，以选择您要选择的横幅/窗帘杆。我附加了每个<tr>内的ID，基于其中的横幅（在创建HTML期间完成）。现在，我需要这样做，以便当它们被点击以进行选择时，显示的示例图像将更改。在创建的HTML中，我创建了一个onclick =“ select（Insert Banner Name Here）” ，希望横幅信息在传递到下一个函数（一个开关）时转移。

后来我发现，从我看到的情况来看，该函数传输变量而不是单词/数据本身。我正在努力想出一种方法，以便在调用时，函数知道哪个横幅被单击。当我测试代码时，它总是返回[object HTMLTableCellElement]。

如果我没有表述清楚，这张图片可能会有所帮助。（抱歉颜色太亮，这样我可以更轻松地看到不同的div）。

右侧选择的横幅，在左侧预览。右侧的图像位于一个包含表格的div内（滚动条的位置）。那是我试图从中调用我的开关函数的地方。

如果有人知道这种可能性，或者更好的方法，请帮忙解决。

- Korvic

Answer 1

你可能需要研究一下 document.createElement 函数。 http://www.w3schools.com/jsref/met_document_createelement.asp 使用这个函数，你可以做出如下操作：

var staffB = ["http://i.stack.imgur.com/ziZF1.png", "http://i.stack.imgur.com/ziZF1.png", "http://i.stack.imgur.com/ziZF1.png"];
var table = document.createElement("table");
for (var staffI = 0; staffI < staffB.length; staffI = staffI + 2) {
    var row = document.createElement("tr");
    var td = document.createElement("td");
    for (var i = 0; i < 10; i++) {
        td.innerHTML = '<img src=' + staffB[staffI] + '.png height="auto" width="100%">';
    }
    td.onclick = function () {
        //Whatever function you like
        alert(1);
    }
    row.appendChild(td);
    table.appendChild(row);
}
document.body.appendChild(table);

这样你就可以通过对象方式控制元素，从而更好地控制事件监听器。 编辑1： 使用匿名函数来维护当前循环状态的示例：

var staffB = ["http://www.faster-minis.com/site/speed-mini.jpg", "http://i.stack.imgur.com/ziZF1.png"];
var table = document.createElement("table");
for (var staffI = 0; staffI < staffB.length; staffI++) {
    var row = document.createElement("tr");
    for (var i = 0; i < 10; i++) {
        var td = document.createElement("td");
        td.innerHTML = '<img src=' + staffB[staffI] + ' height="auto" width="100%">';
        //Anonymous scope to retain loop state
        (function(a){
            td.onclick = function () {
                //Whatever function you like
                //In here, "a" is the current "i"
                alert(a);
                alert(i);
            }
        })(i);
        row.appendChild(td);
    }
    table.appendChild(row);
}
document.body.appendChild(table);

- Emil S. Jørgensen

---

所以，我已经玩了一会儿，现在我已经成功地重新创建了我所拥有的东西，但是我似乎无法正确引用我的其他函数。我发现td.onclick = function将始终保留最后一个横幅的参数，这意味着每个横幅都将执行它调用的函数的相同部分。你知道我该如何解决这个问题吗？ - Korvic

尝试使用包装函数创建唯一作用域。类似于 td.onclick = (function(){ //Your Code })(); - Emil S. Jørgensen

Answer 2

所以，我最终使用div重新设计了它。这样做，我能够为每个块设置ID，并从那里发送一个onclick到“filter”函数。然后，过滤函数使用元素的.id来提取哪个是哪个，然后将该信息发送到我的switch函数。对于那些感兴趣的人，这是代码;

var staffB = ["Admin", "GM", "Dev", "FM", "Lore", "App", "Magic", "Event"];
for (var staffI = 0; staffI < staffB.length; staffI = staffI + 2) {
    var co1 = document.createElement("div");
    var co2 = document.createElement("div");
    var wide = (282 / 2 - 10);

    co1.setAttribute("id", staffB[staffI]);
    co1.setAttribute("onclick", "filter(this)");
    co1.style.float = "left";
    co1.style.width = wide;
    co1.innerHTML = '<img src=banners/' + staffB[staffI] + '.png height="auto" width="' + wide + '">';

    co2.setAttribute("id", staffB[staffI + 1]);
    co2.setAttribute("onclick", "filter(this)");
    co2.style.float = "right";
    co2.style.width = wide;
    co2.innerHTML = '<img src=banners/' + staffB[staffI + 1] + '.png height="auto" width="' + wide + '">';

    document.getElementById("staff").appendChild(co1);
    document.getElementById("staff").appendChild(co2);
}

还有过滤函数；

function filter(ele) {
    var id = ele.id;
    select (id);
}

希望这篇文章能帮助到其他人。

- Korvic