style.display = «block» для элемента event.target и style.display = «none» для других элементов

1

Я пытаюсь установить свойство display для "none" для всех элементов, которые имеют класс "option", но затем я хочу извлечь элемент, на который я нажал, и изменить свойство отображения с "none" на "block".

Я хотел бы найти решение в vanilla JS.

<h1 class="option" id="header1">Header 1</h1>
<h1 class="option" id="header2">Header 2</h1>
<h1 class="option" id="header3">Header 3</h1>
<h1 class="option" id="header4">Header 4</h1>
<h1 class="option" id="header5">Header 5</h1>

document.querySelector('*').addEventListener('click', (event) => {
    let clickedId = event.target.id;
    let clickedClass = event.target.className;

    if (clickedClass === "option") {
        var list = document.querySelectorAll(".option");        
            for (var i = 0; i < list.length; i++) {
                    list[i].style.display = "none";
            };

            document.getElementById(clickedId).style.display = "block";
    }

    console.log(event.target.style.display);
});

Спасибо

  • 0
    если вы скрываете список <h1/> , как вы можете щелкнуть по нему (хотя он был скрыт {display : none;} )? Вы когда-нибудь думали об этом?
  • 0
    Ваш код отлично работает в последних версиях Chrome (62) и Safari (11) на Mac. Это не может быть оптимальным, но это функционально.
Показать ещё 4 комментария
Теги:
for-loop
addeventlistener
event-handling
getelementbyid

2 ответа

0
Лучший ответ

Ваш код работает, но делает некоторые ненужные вещи, такие как:

  • вызов document.querySelector('*') когда у вас уже есть объект document к которому можно присоединить события
  • вызов document.getElementById(clickedId) когда у вас уже есть event.target чтобы указать на ваш элемент document.getElementById(clickedId)
  • настройка стиля display на none а затем block для вашего элемента с щелчком

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

let parent = document.querySelector("#all_options_parent") || document;

parent.addEventListener('click', (event) => {
    if (event.target.className === "option") {
        event.target.style.display = "block";

        let allOptions = parent.querySelectorAll(".option");

        for (let option of allOptions) {
            if (option != event.target) {
                option.style.display = "none";
            }
        }

    }
});
Поделиться
  • 0
    сладкий, который хорошо работает: D
0

просто игнорируйте тот, который был нажат.

document.querySelector('*').addEventListener('click', (event) => {
    let clickedId = event.target.id;
    let clickedClass = event.target.className;

    if (clickedClass === "option") {
        var list = document.querySelectorAll(".option");        
            for (var i = 0; i < list.length; i++) {

                    // ignore the one that was clicked
                    if (list[i] == event.target) continue

                    list[i].style.display = "none";
            };

            // document.getElementById(clickedId).style.display = "block";
    }

    // it is only useful if you display all the hidden again.
    event.target.style.display = "block";

    console.log(event.target.style.display);
});
<h1 class="option" id="header1">Header 1</h1>
<h1 class="option" id="header2">Header 2</h1>
<h1 class="option" id="header3">Header 3</h1>
<h1 class="option" id="header4">Header 4</h1>
<h1 class="option" id="header5">Header 5</h1>
Поделиться
  • 0
    Пожалуйста, объясните, как это отвечает на вопрос.
  • 0
    он игнорирует нажатый цикл for.
Показать ещё 4 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню