Question

我正在尝试通过Ajax更改div的ID 因为ID具有动态值，所以我在div中添加了一个类。

我的PHP代码：

    echo '<div id="pagemenu">
            <ul id="tabpanel">';
$tel = 0;
while($totaalklanten > -4)
{
    $tel++;
    echo '<li><a href="#'.$tel.'" name="'.$tel.'" onclick="listklant(\'klant.php\',this.name)">'.$tel.'</a></li>';
    $totaalklanten = $totaalklanten - 5;
}
echo '</ul>';
echo '<div class="changeme" id="default">';
//Lots of query of php stuff here to execute
echo '</div>

具有'changeme'类的div是受害者。

到目前为止我的Ajax代码：

xmlhttp = new XMLHttpRequest();

function listklant(serverPage, pagenum)
{
    xmlhttp.open("GET", serverPage);



    document.getElementsByClassName('changeme').id = pagenum;
    alert(document.getElementById(pagenum));
    alert(document.getElementsByClassName('changeme').id);


    xmlhttp.onreadystatechange = function()
    {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
        {
            obj.innerHTML = xmlhttp.responseText;
        }
    }
    xmlhttp.send(null);
}

第一个警报给我'空':( ...
然而第二个警报给了我正确的价值，因此'pagenum'成功应用我究竟做错了什么？以及如何解决它？（如果还有什么我可以改进的话，请大声呼喊）

Answer 1

document.getElementsByClassName('changeme').id = pagenum;

这行代码不使用类id设置元素的changeme。 getElementsByClassName会返回包含元素的NodeList。您在id上设置了NodeList属性。显然，这不会反映在列表中的元素上。

要做到这一点，请处理元素本身。如果你有一个关于类的元素，那很简单：

document.getElementsByClassName('changeme')[0].id = pagenum;

如果你有更多的元素，你需要一个循环：

var els = document.getElementsByClassName('changeme');
for (var i = 0; i < els.length; i++ ) {
    els[i].id = pagenum;
}

然而，更改元素的id可能是个坏主意。在这里使用一个类可能是一个更好的主意。

修改要说明第二个alert的工作原理，这是因为NodeList的调用返回了相同的getElementsByClassName。来自the spec：

当使用相同的参数再次在HTMLElement对象上调用方法[getElementsByClassName]时，用户代理可以返回与先前调用返回的对象相同的对象。

更改Class为X的元素的ID

1 个答案: