Javascript .each函数行为异常

Question

我有这个功能

function Overlap() {
setTimeout(function() {
    $(".overlap").each(function(index, object) {
        var image = $(this).prev().attr('src');
        target = $(object);
        var xmlhttp
        xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
            if(xmlhttp.status == 200 && xmlhttp.readyState == 4) {
                xresponse = xmlhttp.responseText.split('-');
                $(target).children('a').attr('href', xresponse[0]);
                $(target).children('.name').html(xresponse[1]); //Set returned array appropriately
                $(target).children('.age').html(xresponse[2]);
                $(target).children('.specialization').html(xresponse[3]);
            }
        }
        xmlhttp.open('POST', 'factory/operational.php', true);
        xmlhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
        xmlhttp.send('overlap=overlap&image=' + image);
    });
}, 1000);

}

HTML:

<div class="Divbox" id="Box_three"><img src='<?php ?>' />
    <div class="overlap">
        <a href='' class='name'></a>
        <div class='age'></div>
        <div class='specialization'></div>
    </div>
</div>

它是这样调用的

window.onload = Overlap();

来自使用它的页面问题是该函数有效..它通常被正确调用，我把window.onload 和 setTimeout 功能可确保页面在尝试抓取 .overlap 元素之前完全加载。现在的问题是，当调用重叠时，页面上大约有 48 个 .overlap div 元素，它们都将此请求发送到operative.php 页面，但是，在返回时，它们不正确，它们只适合从操作.php 返回的最后一个元素，有人可以帮助我找到要传递的正确选择器实例，以确保重叠的每个实例和子级都相应地收到响应

Answer 1

您错过了声明目标变量，使其成为全局变量。

target = $(object);

应该是

var target = $(object);

如果没有 var，循环的每次迭代都将使用相同的目标，这意味着所有 xhr 请求完成回调都将使用相同的目标。

示例:

$.each(["a","b","c"], function(i,val) {
    x = val;
    console.log(x); // "a", "b", "c"
});
console.log(x); //"c"

每个完成后，x 将是一个全局变量，其中包含上次迭代的值。在您的代码中，您在每次迭代中执行异步操作，这意味着每个操作的回调将在每个操作完成后发生，这就是为什么 target 指向所有回调的最后一次迭代。