if 语句中的 javascript 迭代

Question

在此JSFiddle (问题代码被注释掉)第一次单击空单元格会在隐藏输入中设置一个值，并将单元格的背景颜色设置为绿色。单击第二个空表格单元格会设置另一个隐藏输入的值，并将第二个单元格的背景颜色更改为红色。

现在，根据另一个SO问题的反馈，我尝试通过循环遍历表中所有td的数组(所有注释掉的代码)来实现检查，以查看onclick是否已将任何单元格的bgcolor设置为分别为绿色/红色，如果为 true，则将 bgcolor 设置为空/空白以允许新单元格选择获取 bgcolor ，因此应该始终只有 1 个绿色 block 和 1 个红色 block 。有人可以向我解释一下我如何实现循环并检查错误并且没有得到预期的结果。

数组循环有效 here -jsfiddle当不是现有代码的一部分时。但是当我将它添加到需要的代码中时，它不起作用。

HTLM

<div id="starget"></div>
<div id="etarget"></div>

<table width="100%" id="test">
    <thead>
        <tr>
            <th>Tech</th>
            <th>0800</th>
            <th>0900</th>
            <th>1000</th>
            <th>1100</th>
            <th>1200</th>
        </tr>
    </thead>
    <tr>
        <td>Bill</td>
        <td>XXX</td>
        <td onclick="res(0900,this);"></td>
        <td>XXX</td>
        <td>XXX</td>
        <td onclick="res(1200,this);"></td>
    </tr>
</table>

脚本

var x = 0;
var click = 0;

/* tdElements = document.getElementsByTagName("td"); */
/* I have tried the tdelements array inside and outside of the function */

function res(zz,el) {
    if (click == 0) {
        /* for(var key in tdElements) { 
            if (tdElements[key].style.backgroundColor=="green") {
                tdElements[key].style.backgroundColor="";
            }
        } */
        document.getElementById('starget').innerHTML=zz;
        click = 1;
        el.style.backgroundColor='green';
    }
    else {
        /* for(var key in tdElements) { 
            if (tdElements[key].style.backgroundColor=="red") {
                tdElements[key].style.backgroundColor="";
            }
        } */
        document.getElementById('etarget').innerHTML=zz;
        click = 0;
        el.style.backgroundColor='red';
    }
}

Answer 1

如果您调用.getElementsByTagName，您将不会返回数组!您将返回一个 live HTMLCollection 元素，其中包含一些在使用 for.. in 循环时无法忽略的其他项目。这里 for 循环会派上用场，因为您的实时 HTMLCollection 包含您可以使用的 length!

/* HTMLCollections come with a length attribute we can use 
 * as every item is numbered, but in a object-style key-value pair */
for(var i = 0; i < tdElements.length; i++){
    /* This was tripping up your code - the `item` function to fetch an
     * element at the index defined in the HTMLCollection*/
    tdElements.item(i).style.backgroundColor = "green"
}

这会将所有背景变成绿色。现在您必须修改代码，但这就是它的工作原理。更多信息请点击:https://developer.mozilla.org/en-US/docs/Web/API/HTMLCollection