修改<；img src style="；能见度“&燃气轮机；通过JavaScript

我正在用HTML和JS构建一个记忆游戏，你猜两张不同的图片，然后试着选择两张相同的图片

我一直在为隐藏图像添加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>'

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

有人有办法吗？我可能错过了一些东西，无法理解。。。

---

注意：这是学校作业，因此必须在表格中。

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

var child = element.childNodes;

var子级将返回一个元素数组，然后您只需访问元素所在的位置，并更改可见性属性：

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

---

下面是一个固定的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';
}

var表=”；
对于（变量i=0；i<4；i++）{
表+=''；
对于（var j=0；j<3；j++）{
表+='
';
}
表+=''；
}
document.getElementById（'theGame'）。innerHTML=''+table+''；
函数单击它（单元格）{
var image=cell.children[0]；
image.style.visibility='visible'；
}

您可以在下面尝试， 只是玩了一个动态匹配元素id的把戏 使其可见

添加了点击到td而不是图像。 将id添加到图像中

这是密码

<div id="theGame">

var表=”；
对于（变量i=0；i<4；i++）{
表+=''；
对于（var j=0；j<3；j++）{
表+=''；
}
表+=''；
}
document.getElementById（'theGame'）。innerHTML=''+table+''
函数（元素）{
document.getElementById（'img_'+元素）.style.visibility=“visible”；
}

td中最初放置一些空白图像，然后单击将图像的src更改为所需的src。fiddle plz？。。。。没什么可看的，我正试图找出@shyampatil的答案将事件附加到单元格而不是图像。您不能单击不可见元素。非常感谢，伙计，这很有效：），但我不太了解单元格的工作原理。子项[0]是选择第一个子项还是选择第一个子项？是的，当然。children返回元素数组，我们需要选择其中的第一个元素。虽然使用jquery看起来会更漂亮

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