如何在尚未定义的情况下在 jQuery 中使用 $(this)？

Question

我有一段 jQuery 代码，我只需要显示一个 div 取决于用户是想使用视频文件还是嵌入 YouTube 视频。

对于上下文：我正在使用 ACF 块在 wordpress 中构建一个网站。我创建了一个按钮组，用户可以在 WP 仪表板中单击“YouTube 视频”或“视频文件”，基于此，将出现不同的 ACF 字段，并且基于此，不同的 html 代码是需要在前端显示视频。

现在的问题是，我已将两个 html 代码都放在 div 包装器（打开以显示视频的模块）中，但根据 WP 仪表板的选择，只有一个应该播放的视频（YouTube 嵌入或视频文件）。所以我需要隐藏另一个 div.

从技术上讲，我已经实现了这一点，但现在的问题是我希望用户可以在一个页面上多次使用此块，如果他们需要一个块包含嵌入的 YouTube 视频，另一个块包含一个视频文件，那么我目前拥有的代码将应用于这两个字段，导致 div 都被隐藏，而不仅仅是一个。

所以，我的想法是在我的 jquery 代码中使用 $(this) 仅将该代码应用于当前选择器，但我尝试的每个选项都不起作用。

这是我正在使用的代码：

HTML

  <div style="display:none;opacity:0" class="video_popup_wrapper <?php the_field('bildvideo_feld_media_datei_feld_bild_youtube_video'); ?>">
      <div class="video_div youtube_id">
        <div class="html-embed w-embed w-iframe"><iframe class="youtube-video" 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 class="video_div video_datei">
          <div class="html-embed w-embed w-iframe"><iframe class="youtube-video" 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') ?>);" class="stop-video w-inline-block"></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" );
  }

但是我现在如何更改 jquery 代码以使用 $(this) 呢？

此外，仅供参考：我使用 ACF 中的按钮组将 classes 添加到两个 divs：因此，当用户选择嵌入 Youtube 视频时，class 'test1234' 添加到 div .video_popup_wrapper 如果用户选择上传视频文件，则 class 'test12345' 添加到div.video_popup_wrapper

Answer 1

您不需要引用 this 来执行您需要的操作。

如您所知，父元素的 class 和运行前 PHP 代码中的动态值，您可以直接使用选择器和 hide() 它们。此选择器适用于这些 class 的多个实例。

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

如果出于某种原因，您确实希望使用对元素的引用来实现此目的，那么您将需要一个循环和 find() 方法。请注意，下面的代码在行为上与上面的相同。

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

如何在尚未定义的情况下在 jQuery 中使用 $(this)？

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

javascript

wordpress

jquery