Question

我对编程和社区都很陌生，我会尽量清楚。我需要在每个单元格中创建一个带有按钮的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>确切实现的目标。你这样做只是用字符串(i++)命名每个id，这与id应该是唯一的想法相矛盾。如果您想将ids从例如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。

Answer 2

试试这个：

var rows = 16, cols = 16;
var table = '';

function shuffle(array) { // shuffle (randomize) array elements
  var i = array.length, j, x;
  while (i) {
    j = Math.random() * i-- | 0;
    x = array[i];
    array[i] = array[j];
    array[j] = x;
  }
}

var rNums = new Array(rows * cols);
for (var i = 0; i < rows * cols; i++) {
  rNums[i] = i;
}
shuffle(rNums);

function displayImage(num) {
  //var num = Math.floor(Math.random() * 256);
  document.canvas.src = '../../output/'+ imagesArray[num]+ '.png';
  //document.getElementById("canvas").innerHTML = num;
  document.getElementById("YourImage").style.visibility = "visible";
}

var i = 0;

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(' + rNums[i] + ')">show me</button></td>';
    i++; //go to next element of rNums array
  }
  table += '</tr>';
}
document.write('<table id="grid" border="1">' + table + '</table>');

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

2 个答案: