Prototype JSをvanilla JSに変換します。

Question

私は以下のJS/prototypeJSを持っています。これは完全にvanilla JSで書いてみたいと思います。ある要素（同じクラスの要素のうちの1つ、つまりfaq-container）をクリックし、特定のクラス（この場合はfaq-display）を追加し、このクラスを親コンテナ（faq-block）にのみ追加したいとします。

純粋な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'); 
 
      } 
 

 
     }); 
 
}

確かに多くのありがとう！

Answer 1

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