• 0
ErUnDAK

Как работает код

Спросил ErUnDAK

    Вопрос

    ErUnDAK    1

    ErUnDAK
    Опубликовано:

    Может мне кто-нибудь объяснить как работает данный код? Желательно поэтапно

    <!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
</head><body>

<button data-toggle-id="subscribe-mail">
  Показать форму подписки
</button>

<form id="subscribe-mail" hidden>
  Ваша почта: <input type="email">
</form>

<script>
  document.onclick = function(event) {
    var target = event.target;

    var id = target.getAttribute('data-toggle-id');
    if (!id) return;

    var elem = document.getElementById(id);

    elem.hidden = !elem.hidden;
  };
</script>

</body>
</html>

     

    Поделиться сообщением

    Ссылка на сообщение
    Поделиться на других сайтах

    9 ответов на этот вопрос

    Рекомендуемые сообщения

    • 1

    AlexZaw    15

    AlexZaw
    Опубликовано:

    да тут вроде все понятно:

      document.onclick = function(event) {
    //при событии клика на область документа выполняется функция принимающая event
    
    var target = event.target;
    // в переменную target присваивается DOM элемент по которому произошел клик

    var id = target.getAttribute('data-toggle-id');
    //в переменную id  присваиваем значение аттрибута data-toggle-id элемента target
    
    if (!id) return;
    // если в id нет значения (getAttribute вернул null, а значит if возвращает ложь), выходим из функции 

    var elem = document.getElementById(id);
    //если получили значение - присваеваем переменной elem элемент DOM со значением хранящемся в id

    elem.hidden = !elem.hidden;
    // присваиваем полученному элементу обратное значение аттрибута hidden (если есть - убираем, если нет - добавляем
  };

     

    Поделиться сообщением

    Ссылка на сообщение
    Поделиться на других сайтах
    • 0

    DivMan    92

    DivMan
    Опубликовано:

    Не понимаю, что такое elem.hidden = !elem.hidden

    Поделиться сообщением

    Ссылка на сообщение
    Поделиться на других сайтах
    • 0

    DivMan    92

    DivMan
    Опубликовано:

    Когда ты кликаешь в любое место, то в id записывается кнопка button, если её нету то функция завершается, потом опять ищется эта кнопка, какой-то код не полный

    Поделиться сообщением

    Ссылка на сообщение
    Поделиться на других сайтах
    • 0

    AlexZaw    15

    AlexZaw
    Опубликовано:
    1 час назад, DivMan сказал:

    Когда ты кликаешь в любое место, то в id записывается кнопка button, если её нету то функция завершается, потом опять ищется эта кнопка, какой-то код не полный

    не совсем так, в id кнопка записывается только тогда когда кликнули именно по ней,  если бы у нас были несколько кнопок с таким data-атрибутом, но с разными value, то каждая кнопка ссылалась бы на свой элемент, если мы кликнули на элементе у которого нет этого дата-атрибута, то в id записывается null либо пустая строка.

    код вполне себе полный и рабочий - показывает и скрывает форму при нажатии на кнопку, нажали один раз - форма появилась, нажали еще раз - исчезла

    Поделиться сообщением

    Ссылка на сообщение
    Поделиться на других сайтах
    • 0

    Николя223    322

    Николя223
    Опубликовано:
    2 часа назад, DivMan сказал:

    elem.hidden = !elem.hidden

    атрибут hidden

    тут примитивный тумблер видимости.  при щелчке по документу, отлавливается определенный селектор.  если щелчок был по нему, то просто меняется  значение атрибута hidden на обратное.   true либо false

    Поделиться сообщением

    Ссылка на сообщение
    Поделиться на других сайтах
    • 0

    ErUnDAK    1

    ErUnDAK
    Опубликовано:

    что означает event? Это параметр функции или что?

    Поделиться сообщением

    Ссылка на сообщение
    Поделиться на других сайтах
    • 0

    AlexZaw    15

    AlexZaw
    Опубликовано:

    https://learn.javascript.ru/obtaining-event-object вот тут про event можно почитать

    Поделиться сообщением

    Ссылка на сообщение
    Поделиться на других сайтах
    • 0

    DivMan    92

    DivMan
    Опубликовано:

    А зачем такие сложности, если можно сделать с помощью classList.toggle?

    Поделиться сообщением

    Ссылка на сообщение
    Поделиться на других сайтах
    • 0

    AlexZaw    15

    AlexZaw
    Опубликовано:

    отслеживание элемента по которому кликнули все равно придется делать, а такая запись короче и не приходится вводить доп класс

    Поделиться сообщением

    Ссылка на сообщение
    Поделиться на других сайтах

    Создайте аккаунт или войдите в него для комментирования

    Вы должны быть пользователем, чтобы оставить комментарий

    Создать аккаунт

    Зарегистрируйтесь для получения аккаунта. Это просто!

    Зарегистрировать аккаунт

    Войти

    Уже зарегистрированы? Войдите здесь.

    Войти сейчас
    • Войти через Facebook
    • Войти через Twitter
    • Войти через Microsoft
    • Войти через LinkedIn
    • Войти через Google
    Перейти к списку вопросов Для начинающих

    • Похожие публикации

      • Super_Saimon
        Блочная верстка макета
        Автор: Super_Saimon
        Добрый день! Я с чисто теоретическим вопросом касательно верстки сайта. Столкнулся с одним нюансом, который вызывает затруднения. Лучше начну сразу с нудного и длинного)) примера, так станет в разы понятней в чем суть моего вопроса. Допустим, имеем часть сайта, отвечающую за основной контент... назовем "main". У main есть container, отвечающий за центровку контента. И main делится, в свою очередь, на две части- main__left(блок под меню с возможной рекламой), и main__right (блок с основным контентом).  И вот почти добрался до сути. Далее в main__left я создаю блок для навигации и блок для рекламы, к примеру. А в main__right, допустим, еще две колонки. Так вот, вся моя верстка заключается в том, что  я стараюсь не плодить кучу вложенных блоков. То есть, на конкретном примере, main__right- я  добавлю еще "content__right", "content__left".  И в этих двух блоках буду прописывать и позиционирование относительно родителя, и относительно соседа. А когда смотрю примеры, то там чуть-ли под каждое свойство отдельный вложенный блок.То есть, позиционирование относительно родителя-один блок, позиционирование относительно соседа-делаем вложенный в предыдущем... Я вот не пойму что дает такая модель верстки. И если этот метод, если можно так сказать, "канонический", то где можно про это прочитать чтобы до такого "додуматься")). Я, просто, немало уже перечитал на этот счет(и таких популярных источников как htmlacademy, "Большая книга CSS" и т.д.). И вроде ж все понятно,  а как-то мыслить правильно, что-ли, не получается. Может кто сможет объяснить мне, непутевому, в чем суть, в чем соль? Извиняюсь за такой нелепый вопрос.
      • mcMega
        Вставка исходного года в html
        Автор: mcMega
        Всем привет!
        Столкнулся с проблемой, сервер может обрабатывать не более 5 запросов одновременно, поэтому приходится вставлять некоторые элементы прямо в index.htm
        Сейчас реализовано как ссылка
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> или <link rel="shortcut icon" href="favicon.png" type="image/png"> но нужно код картинки вставить прямо в htm чтоб убрать лишние запросы к серверу.
        Как вставить исходный код вместо ссылки на favicon или иные картинки?
      • Crushing
        Практика/Задачи JavaScript
        Автор: Crushing
        Предлагаю оставлять в этой теме задачки для новичков, всякие задания по типу: Сделать калькулятор который будет отнимать и прибавлять от одного числа другое. И оставлять готовое решение сразу, что бы если возникают проблемы можно было решить.

    Карта разработчиков

    Карта участников

    Отметь себя на карте для поиска или предложения работы