Question

每当DIV元素的类别发生变化时，我都试图更改网页上的数字以显示当前页码。

{{ form.as_table }}

我正在使用fullpagejs插件，该插件可将类名动态添加到当前查看的部分中；在这种情况下，class =“ section”变为class =“ section fp-section active fp-completely”。

此标记之外是位置为固定的另一个div

    <div id="fullpage">
        <div class="hover_color"></div>
        <div id="main_wrapper">
            <!--Section 1-->
            <div class="section" id="section0">
                <h1>Hello.</h1>
            </div>

我希望将第二部分激活时将01的值更改为02，将第三部分激活时将02的值更改为03。

我正在运行此javascript以实现此结果。

    <div id="inc" class="inc_num">
            <p>00.</p>

    </div>

但是，这不起作用

Answer 1

您应该选中MutationObserver

它确实在做您想要的

Answer 2

    let detectSection, detectFooter, section, footer;
    const numberShow = () => {
    detectSection = document.getElementsByClassName('section fp-section active 
    fp-completely');
    if(detectSection !== null){
    section = detectSection[0].id;
    }else{
    detectFooter = document.getElementsByClassName('section fp-auto-height fp- 
    section active fp-completely');
    footer = detectFooter[0].id;
    }
    const num = document.getElementById('inc');


    if(section == 'section0'){
    num.innerHTML ='<p>00.</p><b></b>'; 
     } else if(section == 'section1'){
    num.innerHTML ='<p>01.</p><b></b>'; 
    }else if(section == 'section2'){
    num.innerHTML ='<p>02.</p><b></b>'; 
    }else if(section == 'section3'){
    num.innerHTML ='<p>03.</p><b></b>'; 
    }else if(section == 'section4'){
    num.innerHTML ='<p>04.</p><b></b>'; 
    }else if(section == 'section5'){
    num.innerHTML ='<p>05.</p><b></b>'; 
    }else if(section == 'section6'){
    num.innerHTML ='<p>06.</p><b></b>'; 
    }else if(section == 'section7'){
    num.innerHTML = '';
    }
    }
    setInterval(numberShow, 200);

如何观察HTML类中的更改以更改innerHTML属性

2 个答案: