嘗試在點擊中替換表格中的圖片

我試圖用點擊替換表格中的圖片。我沒有使用JQuery;我只有Javascript才能完成這項任務。我想我已經將問題縮小到了下面JavaScript代碼中的評論。所有其他搜索結束了我如何改變圖像源，當他們是身體的一部分，而不是一個單元格的一部分。我也遇到了其他可能的方式，但由於某種原因，我無法使其工作。非常感謝！嘗試在點擊中替換表格中的圖片

HTML（只切出，所以你可以看到每個變量指的是）

<td class="block"><img class="PieceImg" src="Directory/BlankSpace.png"></td>

的JavaScript

var cells = document.getElementsByClassName("PieceImg"); 

for(var j = 0; j<cells.length;j++) 
{ 
    var cell = cells[j]; 
    cell.addEventListener("click", function() 
    { 
     cell.src="Directory/RedPiece.png"; // This is the problem 
     alert('Test'); 
    }) 
}

來源

2015-04-21 j_pingle

什麼問題？控制檯中出現錯誤？ – epascarello

問題是，當我點擊單元格時，圖片無法切換;沒有錯誤 –

假設你正在運行你的JavaScript在DOM被加載，您應該只需將cell.src替換爲this.src即可。

var cells = document.getElementsByClassName("PieceImg"); 

for(var j = 0; j<cells.length;j++) 
{ 
    var cell = cells[j]; 
    cell.addEventListener("click", function() 
    { 
    // Replace cell. with this. 
    this.src="Directory/RedPiece.png"; 
    alert('Test'); 
    }) 
}

原因很簡單：每次循環，您創建一個名爲「細胞」（var cell = cells[j];）變量。每次循環運行時，這個非全局變量都會被覆蓋。如果你在一個函數內部運行這個代碼，那麼當需要改變src時，你的變量將不存在。它將是undefined。請注意，將此變量設爲全局將導致cell成爲類名爲PieceImg的最後一個元素，因此這樣做效果不佳。

但是，如果您使用this來代替，那麼當您單擊它時，您將引用「單擊」（記住addEventListener("click")）元素，在這種情況下是您的圖像。因此您可以更改src。在eventListener內部做一個「this」的console.log來查看更多可以訪問的東西。這與添加「點擊」處理程序內聯的效果類似：

<img src="fox.png" onclick="alert(this.src);" alt="Fox" />

讓我知道這對您是否有意義。

這裏是一個全功能的小提琴：https://jsfiddle.net/7se0vyf5/

來源

2015-04-21 03:34:01 Jonathan

非常感謝它！我能得到更深入的解釋，爲什麼需要this.src而不是cell.src？ –

當然可以。我只是把它添加到我的答案中。 – Jonathan

使完美感。再次感謝！ –

問題是for循環和變量的引用。當您分配事件處理程序時，它不會保持狀態。

var cells = document.getElementsByClassName("PieceImg"); 
 

 
for (var j = 0; j < cells.length; j++) { 
 
    var cell = cells[j]; 
 
    (function(cell){ 
 
     cell.addEventListener("click", function() { 
 
     console.log(cell); 
 
     cell.src = "Directory/RedPiece.png"; // This is the problem 
 
     alert('Test'); 
 
     }); 
 
    }(cell)); 
 
     
 
}

<table> 
 
    <tr> 
 
    <td class="block"> 
 
     <img class="PieceImg" src="Directory/BlankSpace.png"> 
 
    </td> 
 
    <td class="block"> 
 
     <img class="PieceImg" src="Directory/BlankSpace.png"> 
 
    </td> 
 
    <td class="block"> 
 
     <img class="PieceImg" src="Directory/BlankSpace.png"> 
 
    </td> 
 
    </tr> 
 
</table>

來源

2015-04-21 03:41:28 epascarello

嘗試在點擊中替換表格中的圖片

回答

相關問題