Javascript в AEM, чтобы добавить класс, если установлен флажок

Question

Я пытаюсь настроить таргетинг на класс под названием «горизонтальное видео» в div в компоненте AEM, и если автор установил флажок с идентификатором «coral-id-540», я хочу добавить второй классназывается «перевернутый» в div. Вот код, который я написал, который не работает. Может ли кто-нибудь помочь мне понять, почему это не работает? Консоль не показывает ошибок.

var x = document.getElementsByClassName("horizontal-video");

$('#coral-id-540').change(function(){
    if($(this).is(":checked")) {
        $(this).addClass("flipped");
    } else {
        $(this).removeClass("flipped");
    }
});

Answer 1

Вполне возможно, что вы не ожидаете полной загрузки DOM (или, по крайней мере, имеете этот бит кода ниже соответствующего элемента на странице во время загрузки страницы)

Обернут ли ваш код в$(document).ready(function(){ //your code });?

Также имейте в виду, что любой элемент, который динамически добавляется на страницу с помощью JavaScript / jQuery после загрузки страницы, не будет иметь прослушивателя, подключенного с использованием используемого вами метода.

Чтобы позволить динамически добавленным элементам быть включенными в ваш слушатель, вы должны нацелиться на узел предка и добавить слушателя к этому узлу. Простым английским: прикрепите слушателя к элементу «выше». Самым безопасным (хотя и самым медленным) узлом является сам document, но лучше нацелить что-нибудь ближе:

$(document).ready(function () {
    var $horizontalVideo = $(".horizontal-video"); //You're using jQuery - why not use it here? Also, I always name jQuery objects with a `$` in front as a shorthand to know it's wrapped in a jQuery object. Plus, a more descriptive name will help you immensely.

    //replace parent-of-coral with the ID of a parent element that you know exists on DOM ready:
    $("#parent-of-coral").on("change", "#coral-id-540", function (e) { //get used to using "e" as the event variable for preventing default / stopping propagation / etc
        $this = $(this); //cache $(this) reference rather than creating another jQuery object each time you use it

        if ($this.is(":checked")) {
            $this.addClass("flipped");
        } else {
            $this.removeClass("flipped");
        }
    });
});