-5

Can anyone help me with this code? I want to convert this jQuery code to vanilla Javascript, but I am not well familiar with Javascript, so I am stuck.

Here is my code:

 $('.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);
            });

Any suggestion will be appreciated.

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Deauther
  • 1
  • 1
  • 1
    you haven't tried anything? you haven't researched anything? can you show what you've tried, researched? – Kinglish Jul 16 '21 at 16:51
  • 1
    a 5 second google search brought this: https://www.freecodecamp.org/news/how-to-translate-jquery-code-into-vanilla-js/ – Kinglish Jul 16 '21 at 16:53
  • So you want us to do the code for you or do you want a direction? If so - http://youmightnotneedjquery.com/ – Deepak Kamat Jul 16 '21 at 16:55
  • Want a direction. I have tried this @kinglish. but got many errors. – Deauther Jul 16 '21 at 17:01
  • Yes, you can show that code here and ask specific questions about it. It shows you tried. Given the resources in the comments and answer, you should be able to figure out most of it, then you can come back and ask why specific things aren't yielding the results you expect – Kinglish Jul 16 '21 at 17:02

1 Answers1

0

I recommend this answer for replacing document.ready

Research how to use document.querySelectorAll instead of $('selector').each...

Changing attributes should be straightforward if you look it up.

.append might be a challenge, and I don't think there's any simple replacement for these .fadein type functions.

TKoL
  • 13,158
  • 3
  • 39
  • 73