想要将此 jQuery 代码转换为 vanilla JavaScript

问题描述

谁能帮我处理这个代码？ 我想将此 jQuery 代码转换为 vanilla Javascript，但我对 Javascript 不太熟悉，所以我被卡住了。

这是我的代码：

 $('.video-card a').each(function() {
                var data = $(this).attr('data');
                $(this).append('<img src="http://img.youtube.com/vi/'+data+'/maxresdefault.jpg" />');
            });
        
            $('.video-card a').click(function() {
                var data = $(this).attr('data');
                $('#loader').append('<iframe src="https://www.youtube.com/embed/'+data+'" frameborder="0" allowfullscreen></iframe>');
                $('#overlay').fadeIn(250);
            });

任何建议将不胜感激。

解决方法

我建议用 this answer 代替 document.ready

研究如何使用 document.querySelectorAll 而不是 $('selector').each...

如果您查一下，更改属性应该很简单。

.append 可能是一个挑战，我认为这些 .fadein 类型函数没有任何简单的替代品。