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系统。创建它时，它会更改它访问Array中名称的文件的名称，这样我只需要更改列表并添加文件。它创建的HTML是一个表，以便我可以插入两列图像。

然后将该表用于选择菜单，以选择您要选择的横幅/窗帘杆。我根据内部的横幅（在创建HTML期间完成）为每个<tr>附加了一个ID。现在我需要它，以便当它们被点击选择时，显示的样本图像会发生变化。在创建的HTML中，我创建了一个onclick =“select（在此处插入横幅名称）”，以便将横幅信息转移到下一个函数，即一个开关。

我后来发现，从我所看到的，该函数传输变量而不是单词/数据本身。我正在尝试一种可以对此进行编码的方法，以便在调用时，该函数知道点击了什么横幅。当我测试代码时，它总是会返回[object HTMLTableCellElement]。

如果我没有意义，这张图片可能会有所帮助。（为明亮的颜色道歉，他们在那里，所以我可以更容易地看到不同的div）。

选中的横幅位于右侧，预览位于左侧。右侧的图像位于div内的表格中（滚动条位于其中）。那是我试图调用我的开关功能的地方。

如果有人知道这种可能的方式，或者更好的方式，我会喜欢它的帮助。

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);

Answer 2

所以，我最终做的是用div重新处理它。这样做我能够为每个块设置ID，并从那里发送onclick到'过滤器'功能。过滤器函数然后使用元素.id来提取哪个，然后将该信息发送到我的开关函数。这是感兴趣的人的代码;

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);
}

希望如果他们找到这篇文章，这可以帮助别人。

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

2 个答案: