У меня есть фрагмент кода 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
Вам не нужна ссылка на 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();
});
ты не можешь написать
$(".video_popup_wrapper", this.$){
?