Question

我有这个功能可以将HTML内容从页面上的一个元素切换到另一个元素。我遇到的问题是，当运行此函数的第一次迭代时，它会保留原始HTML值。我认为下面的代码只会覆盖当前内容。我先错了吗？

其次，我使用Ajax来调用内容。这可能是DOM如何看不到变化的原因吗？

这是我的代码：

function subNavContent ( ) {    
    //If ID is the reference.
    //navContent = document.getElementByID('pageNav').innerHTML;
    navContent = document.getElementsByClassName('pageNav')[0].innerHTML;   
    document.getElementById('subNav').innerHTML = navContent;
    return;}

我打电话要转换的HTML元素：

            <nav id="subNav" class="aniSubNavOpen drop-shadow lifted">
            </nav>

            <div class="pageNav">
            <h1 data-title="Welcome to The Mind Company">
            <a>Welcome to The Mind Company</a></h1> 
            </div>

Ajax调用（和其他东西为了完整性。）

function subNavContent ( ) {    
    navContent = document.getElementsByClassName('pageNav')[0].innerHTML;   

    document.getElementById('subNav').innerHTML = navContent;}

function subNavLoader ( ) {
    var subNav = document.getElementById( 'subNav' );
    var tmp = '';

    if (subNav.className === 'aniSubNavClose' ) {
            tmp = 'aniSubNavOpen';  }
        else {
            tmp = 'aniSubNavClose';}

        subNav.className = tmp;
        return;}

function sectionAssure( classID, type ) {
    subNavLoader ( );

    setTimeout( function ( ) {

        var tmp = '';
        var sel = document.getElementsByTagName('section');

        for (var i=0; i<sel.length; i++){

            if (sel[i].id == classID) { tmp = 'block' } else { tmp = 'none' }
            sel[i].style.display = tmp;  }  

        subNavLoader ( ); }, ( 1500 ) );  }

function loadContent ( classID, url, type ) {   
    var xmlhttp;

    if ( window.XMLHttpRequest ) {
        xmlhttp = new XMLHttpRequest();

        xmlhttp.onreadystatechange = function () {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200 ) {
                document.getElementById( classID ).innerHTML=xmlhttp.responseText;}};   

        xmlhttp.open( "GET", url, true );           
        xmlhttp.send( );            
        subNavContent ( );}  
    return;  }

Answer 1

如果您的对象class="pageNav"和id="subNav"存在且pageNav第一次运行subNavContent()功能时其中包含所需内容，那么第一个内容具有class="pageNav"的对象将被复制到id="subNav"的对象。注意 - 这不是移动内容，而是复制HTML并将其分配给对象subNav。它将取代之前subNav的内容。

如果第一次调用它时它不工作，那么可能是因为当你运行该函数时，两个对象中的一个还不存在或者pageNav的内容还没有存在。

此外，您不能拥有两个具有相同ID的元素。您的HTML显示了id="subNav"的两个元素。应该只有一个具有给定ID的元素。这就是document.getElementByid()只返回一个元素的原因。

此外，您问题中的HTML不会显示任何带有class="pageNav"的对象。

在ajax调用完成后，如何进行ajax调用并调用此函数也可能存在问题。您必须向我们展示您的ajax代码，以便我们对此进行评论。例如，如果您没有等到调用ajax调用的成功处理程序，那么在您第一次运行该函数时，新内容将不会出现在页面中。

在OP的实际页面中查看ajax调用的实际代码之后，

编辑。

我可以确认您在ajax调用中调用subNavContent()的方式不正确。此代码无效，因为您在将新内容加载到页面之前调用subNavContent()。这是您现有的代码版本：

function loadContent ( classID, url, type ) {   
    var xmlhttp;
    var dir = getDir ( type );

    if ( window.XMLHttpRequest ) {
        xmlhttp = new XMLHttpRequest();

        xmlhttp.onreadystatechange = function () {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200 ) {
                document.getElementById( classID ).innerHTML=xmlhttp.responseText;}};   

        xmlhttp.open( "GET", dir + url, true );             
        xmlhttp.send( );

        subNavContent ( );}  
    return;  }

您在发送ajax请求后立即致电subNavContent()。您只能在收到回复并且数据已放入您的页面后运行此呼叫。您可以将其更改为：

function loadContent ( classID, url, type ) {   
    var xmlhttp;
    var dir = getDir ( type );

    if ( window.XMLHttpRequest ) {
        xmlhttp = new XMLHttpRequest();

        xmlhttp.onreadystatechange = function () {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200 ) {
                document.getElementById( classID ).innerHTML=xmlhttp.responseText;
                subNavContent ( );
            }
        }   

        xmlhttp.open( "GET", dir + url, true );             
        xmlhttp.send( );

    }  
    return;  
}

此外，你有一种非常困难的支撑方式来阅读，理解，防止犯错和编辑。

Answer 2

您的功能是不切换内容，而是复制内容。 innerHTML是一个字符串，而不是pageNav中包含的实际元素。

要移动内容，您必须从pageNav中选择所有子元素并将它们附加到subNav（使用appendChild）。

DOM上的innerHTML？

2 个答案: