Question

我在HTML＆amp ;;中构建记忆游戏JS你猜两个不同的图像，并尝试选择2个相同的图像。

我坚持将onclick功能放到隐藏的图像上。

这是我的代码如此恶心，试着更好地解释......

var table = '';
for(var i = 0; i < 4; i++){
    table += '<tr>';
    for(var j = 0; j < 3; j++){
        table += '<td align="center"><img src="./pics/image_part_00' + Math.floor((Math.random() * 6) + 1) + '.jpg";" width="100px"" onclick="clicked(this);" style="visibility: hidden;"></td>';
    }
    table += '</tr>';
}
document.getElementById('theGame').innerHTML = '<table border=1 cellpadding="10" class="tabela1">' + table + '</table>'

现在我要做的就是覆盖那个可见性：隐藏;所以单击时图像可见.... 这是函数

function clicked(element){
    element.style.visibility = "visible";
}

但它不起作用，因为使用该元素.style.visibility即可更改表格单元格的可见性。

有人有解决方案吗？我可能遗漏了一些东西而无法想象...... 注意：这是一项学校作业，因此必须在桌子上。

Answer 1

您可以搜索表格单元格的img子项

var child = element.childNodes;

var子元素将返回一个元素数组，然后你只需要访问它的位置，并更改visibility属性：

child[1].style.visibility = "visible";

Answer 2

这是一些固定的javascript。当你捕获onclick事件时，它不会对隐藏元素进行操作。所以我将事件监听器移到td：

var table = '';
for(var i = 0; i < 4; i++){
    table += '<tr>';
    for(var j = 0; j < 3; j++){
        table += '<td align="center" onclick="click_it(this)">
         <img src="./pics/image_part_00' + Math.floor((Math.random() * 6) + 1) + '.jpg" 
           width="100px" style="visibility: hidden"></td>';
    }
    table += '</tr>';
}
document.getElementById('theGame').innerHTML = '<table border=1 cellpadding="10" class="tabela1">' + table + '</table>';

function click_it(cell){
    var image = cell.children[0];
    image.style.visibility = 'visible';
}

Answer 3

你可以在下面试试，只是玩了一个技巧来动态匹配元素id 让它可见。

添加点击到td而不是图像。为图片添加了id。

这是代码

<div id="theGame">

 var table = '';
for (var i = 0; i < 4; i++) {
    table += '<tr>';
    for (var j = 0; j < 3; j++) {

        table += '<td align="center" onclick="clicked(' + j + ')"> <img  id=img_' + j + ' src="./pics/image_part_00' + Math.floor((Math.random() * 6) + 1) + '.jpg;" width="100px"   style="visibility: hidden;"> </td>';
    }
    table += '</tr>';
}
document.getElementById('theGame').innerHTML = '<table border=1 cellpadding="10" class="tabela1">' + table + '</table>'

function clicked(element) {
    document.getElementById('img_' + element).style.visibility = "visible";
}

通过JavaScript

3 个答案: