將Prototype JS轉換爲vanilla JS。

我有以下一塊JS/prototypeJS，我想寫在完整的香草JS。我希望點擊一個元素（具有相同類別的多個元素中的一個 - faq-container），並添加一個特定的類（在這種情況下爲faq-display），並將此類僅添加到父容器（faq-block）。將Prototype JS轉換爲vanilla 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'代替'up'，並且您的腳本可以不加修改。如果你調查一個最接近的polyfill（它只是成爲大多數目標瀏覽器的本機），你應該設置。 – 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

將Prototype JS轉換爲vanilla JS。

回答

相關問題