>source

이 HTML로 구현 된 MaterializeCSS 드롭 다운 메뉴가 있습니다. 이벤트 리스너는 상단에서 드롭 다운 항목을 클릭 한 경우에만 작동합니다.


    <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>


다음 자바 스크립트를 사용하여 메뉴를 알림으로 채 웁니다. 이것은 잘 작동하고 있습니다.

   // 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 항목을 클릭하면 작동하지 않을 수 있습니다. 사용자는 드롭 다운 항목의 상단을 클릭해야합니다.

숨겨진 스팬 요소에서 값을 추출하는 이벤트 리스너 코드입니다.

 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>;

  • 답변 # 1

    드롭 다운의 경우 조치를 처리하는 더 좋은 방법은 onChange 이벤트를 사용하는 것입니다. 따라서 각 dropDown 항목에 onClick을 첨부하는 대신 dropDown 자체의 onChange에 eventHandler를 첨부 할 수 있습니다. 따라서 선택한 값을 변경할 때마다 onChange 이벤트가 트리거되고 선택한 값을 쉽게 얻을 수 있습니다.

  • 답변 # 2

    각 li를 제거 할 수있었습니다. 그런 다음 값 할당을 조정하여 다음을 사용하십시오.

    e.target.parentNode.children[0].textContent.trim();
    
    

  • 이전 arrays - 두 txt 파일의 요소를 비교하여 Java에서 하나의 파일로 병합하는 방법은 무엇입니까?
  • 다음 ssis - "DT_WSTR"및 "DT_I4"데이터 형식은 이진 연산자 "=="와 호환되지 않습니다