В выпадающем меню щелкает eventListener, создавая другой целевой элемент в зависимости от области, по которой щелкнули - PullRequest
Новая
       21

В выпадающем меню щелкает eventListener, создавая другой целевой элемент в зависимости от области, по которой щелкнули

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

У меня есть раскрывающееся меню MaterializeCSS с этим HTML. Прослушиватель событий работает только в том случае, если в верхней части выбран элемент раскрывающегося списка. 


    <div class="left">
      <span id="notificationTotal" class="new badge red" style="display:none"> 
      </span>
        <a class="dropdown-trigger" href="#!" data-target="notificationsDropdown">
          <i class="material-icons"> message</i>
        </a>
      </div>
      <ul id="notificationsDropdown" class="dropdown-content">
    </ul>

Я использую следующий Javascript, чтобы заполнить меню уведомлениями. Это работает просто отлично. 

    // Reset Notification Dropdown
    notificationsDropdown.innerHTML = '';

    notifications.forEach(notif => {
      const displayTime = moment(notif.date).fromNow();
      let typeIcon = 'sms';
      if (notif.type === 'chat') {
        typeIcon = 'lock';
      }

      notificationsDropdown.innerHTML += `<li class="notification">
      <a style="margin-top:0px;margin-bottom:0px;padding-bottom: 0;font-size:14px" href="#" class="blue-text">
      <span class="js-patientName">
      ${notif.contact.firstName} ${notif.contact.lastName}</span>
      <span class="js-notificationPhone" style="display:none">${
        notif.contact.phone
      }</span>
      <span class="js-patientId" style="display:none">${
        notif.patientId
      }</span>
      <span class="js-patientDOB" style="display:none">${
        notif.contact.birthDate
      }</span>
      <p style="margin-top:0px;margin-bottom:0px;padding-bottom: 0;padding-top: 0;">
        <i style="display: inline-flex; vertical-align:middle" class="tiny material-icons">${typeIcon}</i>
        <span class="black-text" style="font-size:12px">
        ${displayTime}
        </span>
      </p>
      </a></li>`;
    });
    notificationsDropdown.innerHTML += `<li class="divider" class="blue-text"></li><li><a href="/notifications" class="blue-text">See All Notifications</a></li>`;
  }

Раскрывающийся список заполняется, и когда пользователь нажимает на конкретную запись раскрывающегося списка .li в зависимости от точного местоположения, по которому он щелкает, он может работать или не работать. Пользователь должен щелкнуть в верхней части раскрывающегося списка.

Это код прослушивателя событий, который извлекает значения из скрытых элементов span. 

  document
    .querySelectorAll('#notificationsDropdown', '.li .a .notification')
    .forEach(input =>
      input.addEventListener('click', async e => {
        // console.log('clicked', e.target);

        console.log(e.target.parentNode);

        const name = e.target.children[0].textContent.trim();
        const phone = e.target.children[1].textContent.trim();
        const patientId = e.target.children[2].textContent.trim();
        const birthDate = e.target.children[3].textContent.trim();
        console.log('patientid ', patientId);

        const patient = {
          name,
          patientId,
          phone,
          birthDate
        };

Есть ли способ переписать код eventListener для решения этой проблемы? Возможно, вместо использования e.target.children [insert_number_here] .textContent, я мог бы использовать .closest ('js-PatientId') или аналогичный?

Так HTML-код отображается на странице. Это пример одного уведомления: 

<ul
  id="notificationsDropdown"
  class="dropdown-content"
  tabindex="0"
  style="display: block; width: 177.297px; left: 1648.7px; top: 0px; height: 251px; transform-origin: 100% 0px; opacity: 1; transform: scaleX(1) scaleY(1);"
>
  <li class="notification">
    <a
      style="margin-top:0px;margin-bottom:0px;padding-bottom: 0;font-size:14px"
      href="#"
      class="blue-text"
    >
      <span class="js-patientName">ANDREW TAYLOR</span>
      <span class="js-notificationPhone" style="display:none">
        5555551212
      </span>
      <span class="js-patientId" style="display:none">
        1
      </span>
      <span class="js-patientDOB" style="display:none">
        1960-01-01
      </span>
      <p style="margin-top:0px;margin-bottom:0px;padding-bottom: 0;padding-top: 0;">
        <i
          style="display: inline-flex; vertical-align:middle"
          class="tiny material-icons"
        >
          sms
        </i>
        <span class="black-text" style="font-size:12px">
          2 hours ago
        </span>
      </p>
    </a>
  </li>
  <li class="divider" />
  <li>
    <a href="/notifications" class="blue-text">
      See All Notifications
    </a>
  </li>
</ul>;

Ответы [ 2 ]

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

мне удалось убрать в каждой ли. Затем настройте присвоение значения, используя следующее: 

e.target.parentNode.children[0].textContent.trim();
0 голосов
/ 17 мая 2019

Для выпадающих меню лучший способ обработки действий - через событие onChange. Таким образом, вы можете прикрепить свой eventHandler к onChange самого dropDown, а не прикреплять onClick к каждому элементу dropDown. Таким образом, всякий раз, когда вы изменяете выбранное значение, вызывается событие onChange, и вы можете легко получить выбранное значение.

...