Question

我正在尝试将图像放在桌子上。如果您单击该按钮，就可以循环浏览可用的选项。但是，该计数器与单元格无关，而是全局计数器。有没有办法制作局部变量，以跟踪单个单元格在数组中的位置？

我尝试过仅对单个单元格创建局部变量，但是它不起作用。

这是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;
        }
    }
};

以下是到目前为止我所做的工作： https://jsfiddle.net/6L0armd4/

理想的结果是我从单个单元格开始数组，并且仅对那些单元格计数。此刻，即使选择其他单元格，它始终会提供下一个纹理。

Answer 1

您需要进行监听器事件您可以在以下代码上将颜色代码更改为图像路径，并避免任何本地路径图像链接问题尝试使用直接在线图像。

var table = document.querySelector('#table')
var selectedCells = table.getElementsByClassName('selected')

table.addEventListener('click', function(e) {
var td = e.target

if (td.tagName !== 'TD') {
return
}

if (selectedCells.length) {
selectedCells[0].className = ''    
}

td.className = 'selected'
})
table {
 cursor: text;
}
tr {
background-color:white;
}
td {
font-size: 14;
cursor: default;
}

td.selected {
background-color: red;

 // replace this with background image tag like this  
 background-image: url("paper.gif


<table border="1" cellpadding="8" cellspacing="2" id="table">
<tr>
<td>Cell one</td>
<td>Cell Tw</td>
<td>Cell three</td>
<td>Cell Four</td>
<td>Cell five</td>
<td>Cell sex</td>
<td>Cell five</td>
<td>cell seven</td>
<td>cell eight</td>
<td>cell nine</td>
<td>cell tens</td>
<td>cell eleven</td>
<td>cell twelve</td>
</tr>
<tr>
<td>AKo</td>
<td>KK</td>
<td>KQs</td>
<td>KJs</td>
<td>KTs</td>
<td>K9s</td>
<td>K8S</td>
<td>K7s</td>
<td>K6s</td>
<td>K5s</td>
<td>K4s</td>
<td>K3s</td>
<td>K2s</td>

Answer 2

一种可能的解决方案：使用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>

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

2 个答案: