javascript - 如何使用 for 循环遍历函数？

Question

我想将“y”变量传递给 okayid，但循环似乎有问题。循环在 okay.item(y) 上第一次调用“y”时工作正常，但它没有循环遍历 okayid.item(y)。在我看来，这是一个范围问题，但我不确定。

var okay = document.getElementsByClassName("Okay");
var okayid = document.getElementsByClassName("OkayID");

var numberOkays = okay.length;

        for(y = 0; y <= numberOkays; y++){
            okay.item(y).onclick = function(){

                xmlhttp = new XMLHttpRequest();
                xmlhttp.onreadystatechange = function(){

                    if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
                        alert('vote Sent to picture with id = ' + okayid.item(y).innerHTML);
                    }
                };
                xmlhttp.open("GET", "ajax/vote.php", true);
                xmlhttp.send();
            };
        }

这是 html ...

<a class="Link1A Okay" href="#"><span class="OkayID">[id]</span><div class="Vote1A">Okay</div></a>

Answer 1

你有很多问题。

• 在 for 循环中，您不初始化 y与 var这可能会导致问题，就像现在一样y是全局范围的一部分。
• 在 for 循环中，你有 y <= numberOkays这将导致在末尾检索到一个空元素，因为 numberOkays 是数组长度的结果。所以你会没事的[y] 最后是未定义的。
• 您不需要在开始时检索 okays，您只需在 onclick 事件中获取适当的元素即可。
• 循环完成后y将在最后一个索引处，因此当点击事件被触发时，当您引用 Okay[y] 时，您总是会得到最后一个元素。 (或者在你的情况下，你会因为问题 2 而变得不确定)。使用它会引用点击的元素，这实际上是您对 Okay[y] 的预期。 .

这是您的代码的更新版本，下面有一个指向可用 jsFiddle 的链接:

var okay = document.getElementsByClassName("Okay");

for(var y = 0; y < okay.length; y++){
    okay[y].onclick = function(){  
        idElem = this.getElementsByClassName("OkayID")[0];

        xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function(){

            if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
                alert('vote Sent to picture with id = ' + idElem.innerHTML);
            }
        };
        xmlhttp.open("GET", "ajax/vote.php", true);
        xmlhttp.send();
    };
}

jsFiddle