Как использовать $(this) в jQuery, если он еще не определен?

У меня есть фрагмент кода jQuery, который мне нужен только для отображения одного или другого div в зависимости от того, хочет ли пользователь использовать видеофайл или встроить видео с YouTube.

Для контекста: я создаю веб-сайт в wordpress с блоками ACF. Я создал группу кнопок, где пользователь может щелкнуть «видео YouTube» или «видеофайл» на панели управления WP, и на основе этого появятся разные поля ACF, а также на основе этого требуется другой HTML-код для отображения видео на лицевой стороне.

Теперь проблема заключается в том, что я поместил оба html-кода в оболочку div (модуль, который открывается для показа видео), но на основе выбора на панели управления WP должно воспроизводиться только одно из видео (встраивание YouTube или видеофайл). . Поэтому мне нужно скрыть другой div.

Технически я добился этого, но теперь проблема в том, что я хочу, чтобы пользователь мог использовать этот блок несколько раз на одной странице, если ему нужно иметь один блок со встроенным видео YouTube и один с видеофайлом, тогда код В настоящее время я бы применил к обоим полям, в результате чего оба div скрыты, а не только один.

Итак, моя идея состоит в том, чтобы использовать $(this) в моем коде jquery, чтобы применить этот код только к текущему селектору, но каждый вариант, который я пробовал, не работает.

Итак, вот код, который у меня работает:

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, чтобы добавить классы к двум div: поэтому, когда пользователь решает встроить видео Youtube, класс «test1234» добавляется в div .video_popup_wrapper, и если пользователь решит загрузить видеофайл, затем в div .video_popup_wrapper добавляется класс test12345

ты не можешь написать $(".video_popup_wrapper", this.$){?

luke_mclachlan 08.04.2022 11:35
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
2
1
46
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вам не нужна ссылка на this, чтобы делать то, что вам нужно.

Поскольку вы знаете класс родительского элемента и динамическое значение из кода PHP перед выполнением, вы можете использовать селектор и hide() их напрямую. Этот селектор будет работать для нескольких экземпляров этих классов.

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

Другие вопросы по теме