Question

我有这个简单的javascript函数，它发出POST请求并获取回复，然后将元素的HTML设置为回复。这是功能：

function updateStatus(vmid) {
    action = 'vmstatuslabel';
    label = $('#status-'+vmid);
    $.post(site + '/application/controllers/ajax.php', {action:action, vmid:vmid}, function(data) {
        console.log(data);
        label.html(data);
    });
}

在执行类似updateStatus（13）的操作时，这样可以正常工作，但多次运行它只会更新表中的最后一个元素。以下是回显脚本标记的表：

        <?php
            if($uvms = $vmhandler->userVMs()) {
                # User has some VMs
                ?>
                    <table class="table table-condensed table-striped">
                        <?php
                            foreach($uvms as $vm) {
                                ?>
                                    <tr>
                                        <td><a href="<?=$site;?>/manage?vid=<?=$vm['id'];?>"><?=$vm['name'];?></a></td>
                                        <td><?=$vmhandler->renderControls($vm['id']);?></td>
                                        <td id="status-<?=$vm['id'];?>">Test</td>
                                        <td><?=$vm['ipaddr'];?></td>
                                    </tr>
                                <?php
                                $vmid = $vm['id'];
                                echo "<script>updateStatus($vmid)</script>";
                            }
                        ?>
                    </table>

表中的最后一个元素将其状态列更新为updateStatus函数返回的任何内容，但其余元素仍为“Test”。

即使是这样的东西也行不通：

function updateStatus(vmid) {
    action = 'vmstatuslabel';
    label = $('#status-'+vmid);
    $.post(site + '/application/controllers/ajax.php', {action:action, vmid:vmid}, function(data) {
        console.log(data);
        label.html("ABCD");
    });
}

只有表格中的最后一个元素设置为ABCD。

然而，这确实有效，并将每个值更新为ABCD：

function updateStatus(vmid) {
        label = $('#status-'+vmid);
            label.html("ABCD");
    }

Answer 1

问题在于方法中的变量声明（action / label），将它们声明为方法的局部变量，否则它将被视为全局一次，后续调用所做的修改也会影响以前的调用

function updateStatus(vmid) {
    var action = 'vmstatuslabel';
    var label = $('#status-' + vmid);
    $.post(site + '/application/controllers/ajax.php', {
        action: action,
        vmid: vmid
    }, function (data) {
        console.log(data);
        label.html("ABCD");
    });
}

假设您调用方法将vmid = 1然后标签将为$('#status-' + 1)并且发送了ajax请求，但在发送ajax请求之前，您再次使用vmid = 2调用该方法label = $('#status-' + 2);由于变量label是全局变量（声明为var），因此在全局范围内修改变量的值。现在第一个ajax请求已完成，而在回调方法中，您使用的是label，但它指的是$('#status-' + 2)而不是$('#status-' + 1)。

Javascript简单函数可以工作，但不能在循环中运行

1 个答案: