小编rhi*_*os1的帖子

我正在尝试做一些非常简单的事情.基本上我有一个可点击的div'热点',当你点击它填满屏幕并显示一些内容.我通过简单地改变div的类,删除'spot'并添加'grow'来实现这一点,并且有一些CSS动画来使它成长.这很好用.

问题是,在这个div中有一个close_button,目前只是文本.我希望这可以将类切换回来 - 即删除成长和读取的点.单击时不会执行此操作.我相信这是在DOM加载时没有这些类的元素,但我是jQuery的新手,不知道如何解决这个问题.

我认为这可能是一种更明智的做法,有人能指出我正确的方向吗？我会非常感激的.我尝试使用toggleClass而无济于事.

$( document ).ready(function() {      
    $(".clickable").click(function() {  
        $(this).addClass("grown");  
        $(this).removeClass("spot");
    });   

    $(".close_button").click(function() {  
        alert (this);
        $("#spot1").removeClass("grown");  
        $("#spot1").addClass("spot");
    });   
});

更新:

我现在正在使用此代码,

$( document ).ready(function() {   
    $(document).on("click", ".close_button", function () { 
        alert ("oi");
        $("#spot1").addClass("spot");
        $("#spot1").removeClass("grown");
    });  


    $(document).on("click", ".clickable", function () {
        if ($(this).hasClass("spot")){
            $(this).addClass("grown");
            $(this).removeClass("spot");
        }
    });
});

奇怪的是,close_button函数仍然不会添加'spot'或删除'grow'虽然它会添加任何其他类,它会删除其他类...我添加了if子句,因为我认为这两个函数都可能被触发时间,互相取消,但似乎没有任何区别