Как применить JS к (открытому) аккордеону, когда он закрыт при загрузке DOM - PullRequest
Новая
       13

Как применить JS к (открытому) аккордеону, когда он закрыт при загрузке DOM

1 голос
/ 13 мая 2019

на https://www.apis.de/dienstleistungen/trainings/ У меня есть несколько аккордеонов.Внутри находятся таблицы с датами и другой информацией.у каждого есть ID, сгенерированный на стороне сервера (php).Я хочу просто взять тег tbody, используя путь селектора (dev tools) -> получить дочерние узлы и переключить, например, узел [11] и узел [12].Проблема в том, что написанная мной функция JS не распознается, потому что аккордеон закрывается при загрузке страницы и не распознает путь селектора (используя IIFE) 

(function(){
let first_table = document.querySelector("#site-wrapper > div > div > main > article > section > ul > li.is-expanded > ul > li > table > tbody"); // gets the tbody of first accordion (Schulungen Deutschland)
console.log(first_table); // returns null, because the accordion was not open when the function is executed. 

})();

Ответы [ 2 ]

1 голос
/ 13 мая 2019

РЕДАКТИРОВАТЬ: То, что я написал раньше, было неверным.

Вместо того, чтобы использовать селектор запросов, вы можете получить доступ к первому tbody, используя document.getElementsByTagName('tbody')[0]

Если вы можете получить доступ к идентификаторам элементов, которые вы хотите поменять на стороне клиента, то вы можете поменять их местами с помощью кода, который jfriend00 писал: 

function doSwap() {
    swapElements(document.getElementById("one"), document.getElementById("two"));
}

function swapElements(obj1, obj2) {
    // create marker element and insert it where obj1 is
    var temp = document.createElement("div");
    obj1.parentNode.insertBefore(temp, obj1);

    // move obj1 to right before obj2
    obj2.parentNode.insertBefore(obj1, obj2);

    // move obj2 to right before where obj1 used to be
    temp.parentNode.insertBefore(obj2, temp);

    // remove temporary marker node
    temp.parentNode.removeChild(temp);
}
<button onclick="doSwap()">Swap</button><br><br>

<ul>
    <li id="one">Item A</li>
    <li id="two">Item B</li>
    <li>Item C</li>
</ul>
0 голосов
/ 13 мая 2019
  1. Путь селектора имеет значение false
  2. Поместите событие щелчка на элементе "li", который хотите просмотреть, поскольку изначально класс "is-extended" недоступен для DOM при загрузке страницы.

  3. ". QuerySelectorAll" not "querySelector" 

           let accordianSection = document.querySelectorAll("#site-wrapper > div > div > main > article > section > ul.accordion ")[0];
       accordianSection.addEventListener( "click", function(){

       let selectedTbody = document.querySelectorAll("#site-wrapper > div > div > main > article > section > ul > li.is-expanded > ul > li > table > tbody ")[0];

         console.log(selectedTbody);

        });
...