프로토 타입 JS에서 바닐라 JS로 변환.

다음과 같은 JS/prototypeJS가 있습니다. 전체 바닐라 JS로 작성하고 싶습니다. 요소 (같은 클래스의 요소 중 하나 인 faq-container)를 클릭하고 특정 클래스 (이 경우 faq-display)를 추가하고이 클래스를 상위 컨테이너 (faq-block)에만 추가하려고합니다.프로토 타입 JS에서 바닐라 JS로 변환.

순수 JS 기능은 .parent.addClass과 관련이 있지만 내 상황에 맞는 예제를 찾을 수 없다는 것을 알고 있습니다.

prototypeJs 라인은 다음과 같습니다

faqContainers[i].addEventListener('click', function(e) { 및

var faqToggle = e.target.up('.faq-block');

스크립트 파일은 다음과 같습니다

var faqContainers = document.getElementsByClassName('faq-container'); 
 

 
    for (var i = 0; i < faqContainers.length; i++) { 
 
     faqContainers[i].addEventListener('click', function(e) { 
 

 
     var faqToggle = e.target.up('.faq-block'); 
 

 
      if (faqToggle.classList.contains('faq-display')) { 
 
       faqToggle.classList.remove('faq-display'); 
 
      } else { 
 
       faqToggle.classList.add('faq-display'); 
 
      } 
 

 
     }); 
 
}

참으로 많은 감사드립니다!

출처

2017-01-09 sdawes

['addEventListener' (https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener)가 prototypejs 메소드가 아닙니다. – Bergi

DOM에 따라 (페이지 마크 업을 표시하지 않았습니다.) 'up'은 필요하지 않지만'e.currentTarget.parentElement'와 같은 것을 사용할 수 있습니다. – Bergi

Mac Safari (최신)에서는'위로'를'closest'로 대체 할 수 있으며 스크립트는 수정되지 않은 채로 작동합니다. 가장 가까운 (대부분의 대상 브라우저가 기본이되는) 폴리 폴리을 조사하면 설정해야합니다. – Walter

여기 PrototypeJS up()closest() 대한 치환의 예이다 :

var faqContainers = document.getElementsByClassName('faq-container'); 
 

 
    for (var i = 0; i < faqContainers.length; i++) { 
 
    faqContainers[i].addEventListener('click', function(e) { 
 

 
     var faqToggle = e.target.closest('.faq-block'); 
 

 
     if (faqToggle.classList.contains('faq-display')) { 
 
     faqToggle.classList.remove('faq-display'); 
 
     } else { 
 
     faqToggle.classList.add('faq-display'); 
 
     } 
 

 
    }); 
 
    }

.faq { 
 
    display: none; 
 
    } 
 
    .faq-block.faq-display .faq { 
 
    display: block; 
 
    }

<div class="faq-container"> 
 
    <div class="faq-block"> 
 
     <h3>Headline</h3> 
 
     <div class="faq"> 
 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
     </div> 
 
    </div> 
 
    <div class="faq-block"> 
 
     <h3>Headline</h3> 
 
     <div class="faq"> 
 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
     </div> 
 
    </div> 
 
    <div class="faq-block"> 
 
     <h3>Headline</h3> 
 
     <div class="faq"> 
 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
     </div> 
 
    </div> 
 
    <div class="faq-block"> 
 
     <h3>Headline</h3> 
 
     <div class="faq"> 
 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
     </div> 
 
    </div> 
 
    <div class="faq-block"> 
 
     <h3>Headline</h3> 
 
     <div class="faq"> 
 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
     </div> 
 
    </div> 
 
    </div>

출처

2017-01-09 23:58:13 Walter

프로토 타입 JS에서 바닐라 JS로 변환.

답변

관련 문제