修改 <img src style=“visibility”> 通過JavaScript

Question

我正在用HTML和JS構建一個記憶游戲，在其中您猜出2張不同的圖像並嘗試選擇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";
}

但這不起作用，因為使用那個element.style.visibility會更改表格單元的可見性。

任何人都有解決方案嗎？ 我可能丟失了一些東西，無法弄清楚……注：這是學校的作業，因此必須放在桌子上。

Answer 1

您可以搜索表格單元格的img子級

var child = element.childNodes;

var子級將返回一個元素數組，然后您只需要訪問is的位置並更改可見性屬性即可：

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