Vanilla JS: показать только следующий элемент в той же родительской группе - PullRequest
Новая
       16

Vanilla JS: показать только следующий элемент в той же родительской группе

0 голосов
/ 03 мая 2019

Я пытаюсь создать несколько вкладок - с циклом.Затем, когда вы нажимаете на название вкладки, которая является промежутком, она раскрывает (или скрывает) следующий промежуток, который находится под ним.Проблема заключается в том, что функция работает только в первой созданной вкладке из цикла, и если вы щелкнете по второй / третьей вкладке и т. Д. - функция будет срабатывать только на первой вкладке.

Попытка использования querySelector и nextElementSiblingбезуспешно.

Использование шаблонов ejs, экспресс-и ванильного JavaScript только.

Это цикл / вкладка. 

<div>   
    <% listedProducts.forEach(function(product) { %>
        <div class="col">
            <span id="info" class="b-d"  onclick="hideReveal()">
                <%= product.name %>
            </span>
            <span>
                <img src="<%= product.logo %>" alt="">
                <p class="r-d"><%= product.supplierCompany %></p>
                <p class="r-d"><%= product.dateListed %></p>
                <p class="r-d"><%= product.dateApproved %></p>
                <p class="r-d"><%= product.supplierName %></p>
            </span>
        </div>
    <% }); %>
</div>

и функция 

function hideReveal() {
    var tab = document.getElementById("info");
    if (tab.style.display === "none") {
        tab.style.display = "block";
    } else {
        tab.style.display = "none";
    }
}

Хотели бы немного помочь, пожалуйста.Спасибо и хороших выходных.

1 Ответ

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

в вашем обработчике кликов, передайте аргумент события, например, function clickHandler(evt), затем произнесите var thisTab = evt.target.id. Это предполагает, что у вас есть атрибут id на вкладке (ах). Затем вы можете переключить открытый / закрытый класс этой вкладки firstElementChild

...