javascript - 使用 Javascript 将单个图像连接到表格中的单个单元格

Question

我对编程和这个社区都很陌生，我会尽量讲清楚。我需要创建一个 16x16 的 HTML 表格，每个单元格中都有一个按钮，每个单元格显示不同的图像 - 一个笑脸，而不会为不同的单元格显示相同的笑脸。我有点卡住了，我也很感激提示，只是想尝试自己继续前进。谢谢!这是我创建表格并显示图像的代码:

function displayImage(){
    var num = Math.floor(Math.random() * 256);
    document.canvas.src = '../../output/'+ imagesArray[num]+ '.png';
    document.getElementById("YourImage").style.visibility = "visible";
}
for(var r = 0; r < rows;r++)
{
    table += '<tr>';
    for(var c= 0; c< cols;c++)
    {
        table += '<td style="width:50px" id="(i++)">' + '<button type="button" onclick="displayImage()">' +
        "show me" + '</button>' + '</td>';
     }
     table += '</tr>';
}
document.write('<table id="grid" border="1">' + table + '</table>');

(为了便于阅读，未显示 ImagesArray，但它只是收集了所有 256 种二进制组合)。这个问题是每次我点击一个按钮它会显示一个随机图像，如果我再次点击同一个按钮它会显示另一个，而我希望它总是为同一个按钮显示相同的图像。注意:之后我不能删除按钮或类似的技巧，因为玩家(这是一个 oTree 实验)需要能够回到他在任何时候看到的笑脸。非常感谢您的帮助!

Answer 1

我会更改生成随机数的点，并将其从显示函数推进到表的初始化。

创建一个包含 0 到 255 之间数字的数组。在遍历行和列以创建表格时，从该数组中选择一个随机数并将其分配给按钮的 id 属性。一定要从数组中删除这个数字，这样它就不能再用于后面的按钮。这样，将使用 256 个数字中的每一个，但顺序是随机的。当用户单击按钮时，使用 displayImage(this.id)按钮的 ID 用作调用 displayImage() 的参数.因此，将始终使用相同数量的按钮来获取相应的图像。

代码:

// call displayImage() with parameter
function displayImage(num){
    document.canvas.src = '../../output/'+ imagesArray[num]+ '.png';
    document.getElementById("YourImage").style.visibility = "visible";
}

// create array 'nums' with numbers from 0 to 255 (= rows * cols)
var nums = [];
for (var i = 0; i < (rows * cols); i++) {
    nums.push(i);
};

for(var r = 0; r < rows; r++)
{
    table += '<tr>';
    for(var c = 0; c < cols; c++)
    {
        // get random index in array 'nums'
        var random = Math.floor(Math.random() * nums.length);
        // assign an id to the button with a random number from 'nums' and use this id in displayImage()
        table += '<td style="width:50px" id="(i++)">' + '<button id="' + nums[random] + '" type="button" onclick="displayImage(this.id)">' +
        "show me" + '</button>' + '</td>';
        // remove the already used random number from 'nums'
        nums.splice(random, 1);
     }
     table += '</tr>';
}
document.write('<table id="grid" border="1">' + table + '</table>');

这样您就可以将相同的图像连接到每个按钮。它在创建表格时是随机的，因此每次加载页面时顺序都不同。

我假设您使用的是 HTML5，因为只有这样才允许 id 属性仅包含数字。

注意:我不知道你到底想用id="(i++)"实现什么创建 <td> 时元素。你这样做的方式只是用字符串命名每个 id (i++)这与 ID 应该是唯一的想法相矛盾。如果你想命名升序的 ID，例如 td-0至 td-255您应该将行更改为:

table += '<td style="width:50px" id="td-' + (r * rows + c) + '">' + '<button id="' + nums[random] + '" type="button" onclick="displayImage(this.id)">' + "show me" + '</button>' + '</td>';

你不能只使用数字而不添加像 td- 这样的东西，因为按钮已经有纯数字作为 id。