How to use $(this) in jQuery when it's not yet defined?-CodePudding

I have a piece of jQuery code which I need to only show one or the other div depending on whether the user wants to use a video file or embed a YouTube video.

For context: I am building a website in wordpress with ACF blocks. I have created a button group, where the user can click "YouTube video" or "video file" in the WP Dashboard and based on this, different ACF fields will appear and also based on this, a different html code is needed to show the video on the front end.

The issue now is that I have put both html codes in a div wrapper (the module that opens to show the video) but based on the selection from the WP Dashboard, only one of the videos (YouTube embed or video file) should be played. So I need to hide the other div.

Technically, I have achieved that but the issue is now that I want that the user can use this block multiple times on one page, if they would need to have one block with an embedded YouTube video and one with a video file, then the code I currently have would apply to both fields, causing that both divs are hidden, not just one.

So, my idea is to use $(this) in my jquery code to only apply that code to the current selector but every option I tried is not working.

So here is the code I have working:

HTML

  <div style="display:none;opacity:0" >
      <div >
        <div ><iframe  width="100%" height="100%" src="https://www.youtube-nocookie.com/embed/<?php the_field('bildvideo_feld_media_datei_feld_youtube_id'); ?>?enablejsapi=1" modestbranding="0" controls="0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="">
          </iframe></div>
      </div>

      <div >
          <div ><iframe  width="100%" height="100%" src="<?php the_field('bildvideo_feld_media_datei_feld_video_datei'); ?>" modestbranding="0" controls="0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="">
            </iframe></div>
      </div>


      <a data-w-id="ccf28eaf-2e0e-5002-536f-6d47e7efb6d7" href="#" style="background-image: url(<?php echo get_theme_file_uri('images/close.png') ?>);" ></a>
    </div>

Jquery:

  if($('.video_popup_wrapper').hasClass("test12345")){  
    
  $(".youtube_id").css( "display", "none" );
  }

  if($('.video_popup_wrapper').hasClass("test1234")){  
    
  $(".video_datei").css( "display", "none" );
  }

But how can I change the jquery code to use $(this) now?

Also, just for context: I used the button group in ACF to add classes to the two divs: So when the user choses to embed a Youtube Video, the class 'test1234' is added to the div .video_popup_wrapper and if the user choses to upload a video file, then the class 'test12345' is added to the div .video_popup_wrapper

CodePudding user response：

You don't need a reference to this to do what you need.

As you know the class of the parent element and the dynamic value from the PHP code before runtime you can use a selector and hide() them directly. This selector will work for multiple instances of these classes.

$('.video_popup_wrapper.test12345 .youtube_id').hide();
$('.video_popup_wrapper.test1234 .video_datei').hide();

If, for whatever reason, you did want to achieve this using a reference to the element in the this keyword, then you would need a loop and the find() method. Note that the code below is identical in behaviour to the above.

$('.vide_popup_wrapper').each((i, wrapper) => {
  let $wrapper = $(wrapper);
  
  if ($wrapper.hasClass('test12345')) 
    $wrapper.find('.youtube_id').hide();
    
  if ($wrapper.hasClass('test1234')) 
    $wrapper.find('.video_datei').hide();
});