我正在尝试将图像放入表格中。我有那个工作，如果你点击，你会循环浏览可用的选项。但是，计数器与单元格无关，它是一个全局计数器。有没有办法创建一个局部变量，以跟踪单个单元格在数组中的位置？
我试过只对单个单元格创建一个局部变量，但它没有用。
这里是js中的相关函数:
var i = 1;
var table = document.getElementsByTagName('table')[0];
var def = ["tex/white.png", "tex/grass.jpg", "tex/stone.jpg", "tex/water.jpg", "tex/wood.jpg", "tex/lava.jpg"];
table.onclick = function(e) {
var target = (e || window.event).target;
if (target.tagName in { TD: 1, TH: 1 }) {
target.className = "img";
console.log((e || window.event).target);
target.setAttribute('style', 'background-image:' + "url(" + def[i] + ")");
if (i < def.length) {
i++
}
if (i == def.length) {
i = 0;
}
}
};
这是我到目前为止所做的工作 fiddle :
https://jsfiddle.net/6L0armd4/
期望的结果是我从单个单元格开始数组，它只对那些单元格有效。目前，它总是提供下一个纹理，即使我选择了不同的单元格也是如此。
最佳答案
一个可能的解决方案:使用 id 来识别每个单元格，并使用一个对象来跟踪每个单元格当前使用的背景(使用它们的 id 作为键)
<html>
<head>
</head>
<body>
<table>
<tr>
<td id='1'></td>
<td id='2'></td>
<td id='3'></td>
</tr>
<tr>
<td id='4'></td>
<td id='5'></td>
<td id='6'></td>
</tr>
<tr>
<td id='7'></td>
<td id='8'></td>
<td id='9'></td>
</tr>
</table>
</body>
</html>
<script>
var table = document.getElementsByTagName('table')[0];
var def = ["https://cdn1.imggmi.com/uploads/2019/6/19/5e4aedcf566fa5e4501ab584d357be01-full.jpg", "https://cdn1.imggmi.com/uploads/2019/6/19/3d39445ffda6687a6b0e80a69a35fdea-full.jpg"];
var currents = {}
getNextIndex = function(index) {
return index === undefined || index >= def.length - 1 ? 0 : index + 1
}
table.onclick = function(e) {
var target = (e || window.event).target;
if (target.tagName in { TD: 1, TH: 1 }) {
var new_bg_index = getNextIndex(currents[target.id])
currents[target.id] = new_bg_index
target.setAttribute('style', 'background-image:' + "url(" + def[new_bg_index] + ")");
}
};
</script>
关于javascript - 将变量分配给单个表格单元格，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56665451/