单击复选框时，AEM 中的 Javascript 添加类

Question

我正在尝试在 AEM 组件内的 div 中定位名为“horizo​​ntal-video”的类，如果作者单击了 ID 为“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");
        }
    });
});