if语句中的javascript迭代

在这种情况下（问题代码已注释掉），第一次单击空单元格会在隐藏输入中设置一个值，并将单元格的bgcolor设置为绿色。单击第二个空表单元格可设置另一个隐藏输入的值，并将第二个单元格的颜色更改为红色

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

当数组循环不是现有代码的一部分时，它可以工作。但当我将它添加到需要的代码中时，它就不起作用了

HTLM

---

如果调用

.getElementsByTagName

，则不会返回

数组

！您将返回一个live

HTMLCollection

元素，其中包含一些在使用

for时不能忽略的其他项。。在

循环中。这里有一个

for

循环将派上用场，因为您的live

HTMLCollection

包含一个您可以使用的

长度

/* 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"
}

/*HTMLCollections附带了一个我们可以使用的长度属性
*因为每个项目都已编号，但在对象样式的键值对中*/
对于（var i=0；i

这将使所有背景变为绿色。现在你必须修改你的代码，但这就是它的工作原理。这里的更多信息：
您真正想做的是用
类来处理这个问题，而不是用
样式来处理这个问题。原因是您可以使用
getElementsByClassName
（注意：在IE 9及更高版本中）非常轻松地提取具有特定类的所有元素

在不偏离您的方法太多的情况下（我确实使它更高效了一点：），您的代码需要更改为：

CSS:

.firstClick {background-color: green;}
.secondClick {background-color: red;}

var click = 0;

function res(zz,el) {
    var currentlyClickedEls, currClass, divTarget;

    if (click === 0) {
        currClass = "firstClick";
        divTarget = "starget";
        click = 1;
    }
    else {
        currClass = "secondClick";
        divTarget = "etarget";
        click = 0;
    }

    // get all the elements with the appropriate class
    currentlyClickedEls = document.getElementsByClassName(currClass);

    // remove that class from those elements
    while (currentlyClickedEls.length > 0) {
        currentlyClickedEls[0].className = "";
    }

    // add the class to the clicked element
    el.className = currClass;
    document.getElementById(divTarget).innerHTML = zz;
}

脚本：

.firstClick {background-color: green;}
.secondClick {background-color: red;}

var click = 0;

function res(zz,el) {
    var currentlyClickedEls, currClass, divTarget;

    if (click === 0) {
        currClass = "firstClick";
        divTarget = "starget";
        click = 1;
    }
    else {
        currClass = "secondClick";
        divTarget = "etarget";
        click = 0;
    }

    // get all the elements with the appropriate class
    currentlyClickedEls = document.getElementsByClassName(currClass);

    // remove that class from those elements
    while (currentlyClickedEls.length > 0) {
        currentlyClickedEls[0].className = "";
    }

    // add the class to the clicked element
    el.className = currClass;
    document.getElementById(divTarget).innerHTML = zz;
}

使用这种方法，在单击时，您要做的第一件事是查找类
firstClick
或
secondClick
（基于
click
的值）中的所有元素并删除该类。因为最多应该只有一个，这使得循环非常短（但如果以某种方式发生的话，还会从多个元素中删除类）

编辑：

.firstClick {background-color: green;}
.secondClick {background-color: red;}

var click = 0;

function res(zz,el) {
    var currentlyClickedEls, currClass, divTarget;

    if (click === 0) {
        currClass = "firstClick";
        divTarget = "starget";
        click = 1;
    }
    else {
        currClass = "secondClick";
        divTarget = "etarget";
        click = 0;
    }

    // get all the elements with the appropriate class
    currentlyClickedEls = document.getElementsByClassName(currClass);

    // remove that class from those elements
    while (currentlyClickedEls.length > 0) {
        currentlyClickedEls[0].className = "";
    }

    // add the class to the clicked element
    el.className = currClass;
    document.getElementById(divTarget).innerHTML = zz;
}

因此，您在代码中不会注意到这一点，因为这两个类的每个实例都不超过一个，但是正如所指出的，我们正在处理DOM元素的实时集合，因此，当您从元素中删除类时（从中删除它们的元素不属于集合

例如，在表的第三次单击时，集合中会有一个元素，该元素由
document.getElementsByClassName（currClass）；
=
HTMLCollection[td.firstClick]
返回（在控制台中）。但是，一旦您从元素中删除了该类，它就不再符合条件，因此集合将变为空（即，
HTMLCollection[]
）

因此，虽然它适用于您的情况（因为它在
i=1
上停止，因为它仍然“不小于”集合的新长度（现在为0）

但是，在其他情况下，情况可能并非如此……例如，如果返回了2个元素，在第一个元素的类被删除后，
i
将更改为1，但长度也将降至1，循环将停止，而不处理第二个元素

因此，确实需要改变方法来正确处理这种行为。我通过改变以下几行来做到这一点：

    for (i = 0; i < currentlyClickedEls.length; i++) {
        currentlyClickedEls[i].className = "";

    while (currentlyClickedEls.length > 0) {
        currentlyClickedEls[0].className = "";

这样，删除其类的元素总是集合中的第一个元素，
while
循环在尝试删除类之前检查集合中是否仍有元素

因此，长话短说，在处理HTML集合时，正如这里的某个东西所指出的，您正在处理一个DOM元素的活动集合，因此，如果您做出的更改会影响该集合中包含的单个元素，它将相应地更新集合，并且您需要能够请在代码中说明这一点。
不要使用
for…in
循环来迭代数组或类似数组的对象。请使用数字索引。@指向实时代码中的实际表（不是这些JSFIDLE示例）可能是100+td，并且是动态创建的，因此我不知道数组索引中会有多少td。我必须以某种方式对其进行迭代。您知道，因为节点列表的
.length
属性从
getElementsByTagName（）返回
会告诉你的。@Pointy所以你的建议是如果
.length
返回，让我们说5o，我应该写这个检查
文档.getElementsByTagName（“td”）[0]。style.backgroundColor==“绿色”；
50次？否-使用
for
循环和数值索引-
for（var I=0；I
并对
tdi元素进行操作
-谢谢，我正在尝试让它在if语句中发挥作用，我将很快做出回应。太棒了，这工作正常，我看到#something here and#pointy在处理HTML集合错误方面也是正确的。感谢大家，这是一项集体努力，我很感激。很高兴提供帮助。：）和