2017-01-09 6 views
0

У меня есть следующий фрагмент JS/prototypeJS, который я бы хотел написать в полной версии Vanilla 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'); 
 
      } 
 

 
     }); 
 
}

Большое спасибо!

+0

[ 'addEventListener'] (https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener) не является прототипом метода – Bergi

+0

В зависимости от вашей DOM (вы не указали нам свою разметку страницы) вам может даже не понадобиться 'up', но вы можете просто использовать что-то вроде' e.currentTarget.parentElement'. – Bergi

+0

В Mac Safari (последнее) вы можете заменить 'ближайший' на' up', и ваш скрипт работает без изменений. Если вы исследуете полиполк для ближайшего (который только становится родным для большинства целевых браузеров), вы должны быть установлены. – Walter

ответ

1

Ниже приведен пример подстановки closest() для PrototypeJS up():

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>

Смежные вопросы