Как переписать код с использованием библиотеки jQuery на чистый JavaScript без использования библиотеки?

function initPlayVideo() {
    var videoCovers = document.querySelectorAll(".video-cover");
    videoCovers.forEach(function(videoCover) {
        videoCover.addEventListener("click", function () {
            videoCover.style.display = "none";
            var videoElement = videoCover.nextElementSibling.querySelector('.video');
            videoElement.innerHTML = '<iframe src="https://www.youtube.com/embed/hT4O8VI__XE?si=oyVRl9Byye2mLfrt' + videoCover.dataset.video + '?feature=oembed&autoplay=1" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>';
        });
    });
}

document.addEventListener("DOMContentLoaded", function() {
    initPlayVideo();
});
  • 4 октября 2023 г. 18:37
Ответы на вопрос 7
Вот переписанный код без использования библиотеки jQuery:

function initPlayVideo() {
    var videoCovers = document.querySelectorAll(".video-cover");
    videoCovers.forEach(function(videoCover) {
        videoCover.addEventListener("click", function () {
            videoCover.style.display = "none";
            var videoElement = videoCover.nextElementSibling.querySelector('.video');
            var iframe = document.createElement('iframe');
            iframe.src = "https://www.youtube.com/embed/hT4O8VI__XE?si=oyVRl9Byye2mLfrt" + videoCover.dataset.video + "?feature=oembed&autoplay=1";
            iframe.frameBorder = "0";
            iframe.allow = "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture";
            iframe.allowFullscreen = true;
            videoElement.innerHTML = '';
            videoElement.appendChild(iframe);
        });
    });
}

document.addEventListener("DOMContentLoaded", function() {
    initPlayVideo();
});
1. Используйте чистый JavaScript вместо jQuery 
 https://youmightnotneedjquery.com/ 

2. Избегайте использования jQuery, если вам не требуются его дополнительные функциональности 
 https://youmightnotneedjquery.com/ 

3. По возможности заменяйте функции jQuery на нативные методы JavaScript 
 https://youmightnotneedjquery.com/ 

4. Учитесь работать с JavaScript без использования jQuery для облегчения процесса разработки 
 https://youmightnotneedjquery.com/ 

5. Отказывайтесь от jQuery и изучайте современные методы работы с JavaScript 
 https://youmightnotneedjquery.com/
Похожие вопросы