gpt4 book ai didi

javascript - 将变量分配给单个表格单元格

转载 作者:行者123 更新时间:2023-11-27 23:48:11 25 4
gpt4 key购买 nike

我正在尝试将图像放入表格中。我有那个工作,如果你点击,你会循环浏览可用的选项。但是,计数器与单元格无关,它是一个全局计数器。有没有办法创建一个局部变量,以跟踪单个单元格在数组中的位置?

我试过只对单个单元格创建一个局部变量,但它没有用。

这里是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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com