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

我正在構建HTML & JS中的記憶遊戲，您猜測2張不同的圖片並嘗試選取2張相同的圖片。通過JavaScript修改<img src style="visibility">

我堅持把一個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 IM改變表格單元格的知名度，因爲工作。

任何人都有解決方案嗎？我可能錯過了一些東西，無法想象它...... 注意：這是一個學校作業，所以它必須在一張桌子上。

來源

2017-01-02 andrew

怎麼樣把一些空白圖像最初在TD，然後的onClick改變圖像的src到所需的一個。 – vvtx

fiddle plz？.... –

https://jsfiddle.net/o9fLkax6/ 沒多大看到我正在努力解決@shyampatil的答案 – andrew

這裏是一些固定的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'; 
}

來源

2017-01-02 18:14:01 Banzay

非常感謝，這工作:) 但我不太明白cell.children [0]是如何工作的，[0]是選擇第一個孩子還是？ – andrew

是的，當然。子元素返回元素的數組，我們需要選擇其中的第一個元素。儘管使用jQuery它看起來更漂亮 – Banzay

您可以搜索表格單元格的IMG孩子

var child = element.childNodes;

var這個孩子會返回元素的數組，那麼你只需要訪問的立場，即就是，改變visibility屬性：

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

來源

2017-01-02 18:01:12 Joge

你可以試試以下，只是捉弄匹配元素的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"; 
}

來源

2017-01-02 18:19:56

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

回答

相關問題