Стремясь оптимизировать использование parentNode и nextElementSibling - PullRequest
Новая
       10

Стремясь оптимизировать использование parentNode и nextElementSibling

0 голосов
/ 04 июня 2019

В этом упражнении по написанию кода мне потребовалось некоторое время, чтобы выяснить, как ссылаться на класс, который здесь скрыт, и теперь, когда он работает, было бы стыдно нарушать его, однако я надеялся реорганизовать этот класс. Дело в том, что ссылка на класс, который необходимо скрыть, является более чистой.

Как вы можете видеть, удвоение nextElementSibling для обхода дерева обходится в жестком кодировании решения для каждого адаптивного повторного использования. Я надеялся просто изменить классы по запросу. Чтобы сделать это, сначала выглядело как использование this.querySelector ('* +') может быть ответом, но после многих попыток (возможно, не правильных, потому что он все еще может работать, если вы не скажете мне иначе), он потерпел неудачу ,

Работает следующее: 

        let el = this.parentNode.firstChild
        el = el.nextElementSibling
        el = el.nextElementSibling

Итак, как можно проще ссылаться на класс .acc-body, учитывая схему HTML, на которую он действует?

И, поскольку принятый здесь подход к передаче событий является явно нестандартным и, вероятно, не рекомендуется, является ли эта причина достаточной для того, чтобы избежать его использования в производстве? 

<div class="acc">
        <div class="acc-item">
            <!-- <div class="acc-title"> -->
            <h1 class="acc-title" id="btn_hide">Click to hide the Body</h1>

            <!-- </div> -->
            <div class="acc-body hideable">
                <p id="head1">Why innerHTML is so great...</p>
            </div>   
        </div> 
        <div class="acc-item"> 
            <h1 class="acc-title" id="other_btn_hide_xxxx">Click to hide the Body</h1>

            <div class="acc-body hideable">
                <p id="head2">Why innerHTML is so great...</p>
            </div>
        </div>
    </div>

Реализовано как IIFE; рекомендуем поместить его в собственный файл .js и ссылаться на него из тега скрипта в документе HTML. 


        (function() {
        console.log('ready to assign event handler to chosen nodelist of elements')
        // returned as a nodelist
        all = document.querySelectorAll(".acc-item .acc-title")
        console.log(all);

        // document[selectionMethod(element)]
        // element.selectionMethod.classList
        console.log('setAttribute \'clickable\' received on: -----------');
        all.forEach ( (j) => {
            console.log(j);
            // j.setAttribute('onclick', 'showhide(this)')
            j.setAttribute('clickable', 'true')
            j.classList.add("clickable")
        })

        console.log('listen for onclick on: ----------');
        all.forEach( (j) => {
            console.log(j);
            j.onclick = function () {
            // alert(this);
            // let el = this.querySelector('* +')
            let el = this.parentNode.firstChild
            el = el.nextElementSibling
            el = el.nextElementSibling
            console.log(el);
            if (el.hidden){
                el.hidden = false
            } else {
                el.hidden = true
            }
            }
        })
    })()
...