Показывать дочерние элементы, если родительский элемент виден

ProgramBox

Показывать дочерние элементы, если родительский элемент виден

Post author:admin
Запись опубликована:11 апреля, 2023
Post category:Вопросы по программированию

#javascript

Вопрос:

Я пытаюсь заставить мою форму показывать дочерние элементы, если родительский элемент виден, и я продолжаю получать ошибку «undefined» с моим дочерним элементом, хотя я его определил. Я пытаюсь настроить это так, чтобы:

Q1: Проверенные ответы будут показывать родительские элементы (divs). Q2: В зависимости от этого ответа, он будет показывать дочерние элементы (divs).

Есть ли способ сделать это?

     //Next Tab

    function next() {
            var formTabOne = document.getElementById("stepOne");
            formTabOne.classList.add("formTrans");
            formTabOne.addEventListener("transitionend", function({
                target
                }) {
                if (target === formTabOne) {
                    target.classList.add("hidden");
                    target.classList.remove("formTrans");
                    document.getElementById("stepTwo").classList.remove("hidden");
                }
            })
        }
    
        //Prev Tab
        
        function prev() {
            var formTabTwo = document.getElementById("stepTwo");
            formTabTwo.classList.add("formTrans");
            formTabTwo.addEventListener("transitionend", function({
                target
            }) {
                if (target === formTabTwo) {
                    target.classList.add("hidden");
                    target.classList.remove("formTrans");
                    document.getElementById("stepOne").classList.remove("hidden");
                }
            })
        }

function process() {
        var form = document.myForm;
        var biz = document.getElementById("biz");
        var career = document.getElementById("career");
        var change = document.getElementById("change");
        var eq = document.getElementById("eq");
        var empathy = document.getElementById("empathy");
        var pm = document.getElementById("pm");
        var bizMgr = document.getElementsByClassName("bizMgr");
        var bizEE = document.getElementsByClassName("bizEE");

            //Q1 - Topics

                document.querySelectorAll("#chkTopic input").forEach((el) => {
                    const contentID = el.id.replace("chk", "").toLowerCase()
                    document.getElementById(contentID).style.display = el.checked ? "block" : "none";
                });
    
            //Q2 - Employee Type
    
                var q2value = "";
                for (var i = 0; i < form.q2.length; i  ) {
                var answer = form.q2[i];
                if (answer.checked) {
                    q2value = answer.value;
                    }
                }
    
                if (q2value == "1") {
                    if (biz.style.display = "block") {
                        bizMgr.style.display = "block";
                        bizEE.style.display = "block";
                    }
                } else {
                    if (biz.style.display = "block") {
                        document.getElementsByClassName("bizEE").style.display = "block";
                    }
                }
        }

     html {
            scroll-behavior: smooth;
        }
        
        #formWrapper {
            background-color: #eaeaea;
            padding: 20px;
            margin-bottom: 40px;
            min-height: 300px;
        }
        
        #myForm {
            width: 70%;
            min-height: 280px;
            margin: 0 auto;
            padding: 20px;
            background-color: #fff;
            border: 1px solid #dedede;
            box-sizing: border-box;
        }
        
        .formStep {
            opacity: 1;
            background: #fff;
        }
        
        .formTrans {
            visibility: hidden;
            opacity: 0;
            transition: visibility 0s 200ms, opacity 200ms linear;
        }
        
        .hidden {
            display: none;
        }

        #biz, #career, #change, #eq, #empathy, #pm, #pd {
            display: none;
            width: 100%;
            min-height: 200px;
            box-sizing: border-box;
            margin-bottom: 30px;
            border: 1px solid #000;
        }
    
        .bizMgr, .bizEE, .careerMgr, .careerEE, .changeMgr, .changeEE, .eqMgr, .eqEE, .empathyMgr, .empathyEE, .pmMgr, .pmEE, .pdMgr, .pdEE {
            display: none;
        }

 <form name="myForm" id="myForm">

        <input type="button" value="Skip This" onclick="formSkip();">

        <br><br>

        <!--Step 1-->

        <div id="stepOne" class="formStep">

            <b>Select the topic(s) you're interested in:</b><br>
            <div id="chkTopic">
                <input id="chkBiz" type="checkbox" value="1"><label for="chkBiz">Business Structure/Acumen</label><br>
                <input id="chkCareer" type="checkbox" value="2"><label for="chkCareer">Career Development</label><br>
                <input id="chkChange" type="checkbox" value="3"><label for="chkChange">Change</label><br>
                <input id="chkEQ" type="checkbox" value="4"><label for="chkEQ">Emotional Intelligence</label><br>
                <input id="chkEmpathy" type="checkbox" value="5"><label for="chkEmpathy">Empathy</label><br>
                <input id="chkPM" type="checkbox" value="6"><label for="chkPM">Performance Management</label><br>
            </div>
            <br>
            <button type="button" id="btnStepOne" onclick="next();">Next</button>

        </div>

        <!--Step 2-->

        <div id="stepTwo" class="formStep hidden">

            <b>Are you a people leader?</b><br>
            <input type="radio" name="q2" value="0">No<br>
            <input type="radio" name="q2" value="1">Yes<br>

            <br>
            <button type="button" id="btnStepTwo" onclick="prev();">Previous</button>
            <input type="button" value="Show Results" onclick="process();">
            <input type="reset" value="Start Over" onclick="formReset();">

        </div>
    </form>

<div id="results">
<div id="biz">
    Business Structure/Acumen
    <div class="bizMgr">Manager Content</div>
    <div class="bizEE">Employee Content</div>
</div>
<div id="career">
    Career Development
    <div class="careerMgr">Manager Content</div>
    <div class="careerEE">Employee Content</div>
</div>
<div id="change">
    Change
    <div class="changeMgr">Manager Content</div>
    <div class="changeEE">Employee Content</div>
</div>
<div id="eq">
    Emotional Intelligence
    <div class="eqMgr">Manager Content</div>
    <div class="eqEE">Employee Content</div>
</div>
<div id="empathy">
    Empathy
    <div class="empathyMgr">Manager Content</div>
    <div class="empathyEE">Employee Content</div>
</div>
<div id="pm">
    Performance Management
    <div class="pmMgr">Manager Content</div>
    <div class="pmEE">Employee Content</div>
</div>
</div>

Ответ №1:

.getElementsByClassName возвращает коллекцию, bizMgr и bizEE являются обоими collections . Вы должны повторить collections и установить для каждого element значение style.display = 'block' . Вы не можете просто вызвать xxx.style.display для javascript коллекции. Вы хотели бы изменить свой код следующим образом:

             if (q2value == "1") {
                if (biz.style.display = "block") {
                    //bizMgr.style.display = "block"; -NO
                    //bizEE.style.display = "block"; -NO
                    for(let i = 0; i < bizMgr.length; i  ){
                       bizMgr[i].style.display = "block";
                    }

                    for(let j = 0; j < bizEE.length; j  ){
                       bizEE[j].style.display = "block";
                    }
                }
            } else {
                if (biz.style.display = "block") {
                    //document.getElementsByClassName("bizEE").style.display = "block"; -NO
                    for(let j = 0; j < bizEE.length; j  ){
                       bizEE[j].style.display = "block";
                    }
                }
            }

1. Это имеет смысл. Но если я попытаюсь добавить вышеупомянутые для каждой другой категории, я получу «неожиданный токен ‘else'». Мне нужно сделать вышеописанное, но для каждой другой категории, которая была задана в Q1.

2. @DD1229 unexpected token 'else' означает, что у вас неверно сформированный код. bracket Где-то отсутствует или какая-то другая проблема с форматированием.

3. @DD1229 Я понял, что опустил закрывающую скобку для else инструкции. Если вы скопировали и вставили мой ответ, это причина ошибки. Пожалуйста, перепишите мой ответ, поскольку я добавил недостающую скобку.

4. Понял. Сейчас я просматриваю каждую другую категорию, и, похоже, выполняется только первый цикл «for»: jsfiddle.net/4h0gcnjr

5. @DD1229 Ваша скрипка показала ошибочный код: var careerEE = document.getElementsByClassName("bizEE"); -> у вас должен был быть -> var careerEE = document.getElementsByClassName("careerEE"); Я не знаю, что вы имеете в виду, когда запускаете только первый for цикл? В любом случае, я был бы признателен, если вы отметите мой ответ как принятый, если он решит проблему с вашим сообщением. Если у вас есть другие вопросы, пожалуйста, создайте новый пост.