Question

刚开始学习js。

点击叠加后，切换类也会被激活。

第一个代码在网站上生成一个叠加层，一旦打开，您点击它将关闭的叠加层。

<script> 

init=()=>{
    //SELECT & BIND (CLICK) EVENT
    document.querySelector('a.menuToggle').addEventListener('click',modal.overlay.init);
}
modal={
    overlay:{
        init:()=>{
            //CREATE OVERLAY 
            var overlay = document.createElement('overlay');
            overlay.id = 'welcomeDivs';
            //SET (CLICK) EVENT TO REMOVE ITSLEF
            overlay.addEventListener('click',modal.overlay.remove);

            //APPEND TO INTERFACE
            document.body.appendChild(overlay);

        },
        remove:(e)=>{
            //REMOVE ITSELF
            e.target.parentNode.removeChild(e.target);
        }       
    }
}

//ON DOCUMENT LOAD RUN INIT
document.addEventListener('DOMContentLoaded',init);

</script>

我想要做的是点击身体或叠加层后，也会点击切换类。

<script type="text/javascript">
 $(function() {
        $("#welcomeDivs").click(function() {
            $(".parela").toggleClass('myClass');
        });
    });
</script>

请帮我解决这个问题

Answer 1

试试这个

首先附加到身体然后应用点击功能。
为叠加标记添加一些innerHTML。然后才能看到正文中的叠加层
使用jquery的<{3}}函数点击事件使用
最终在console.log

outerHTML

＆＃13;

parela

＆＃13;

$(function() {
        $(document).on('click','#welcomeDivs',function() {
            $(".parela").toggleClass('myClass');
            console.log($(".parela")[0].outerHTML)
        });
    });
    
    init=()=>{   document.querySelector('a.menuToggle').addEventListener('click',modal.overlay.init);
}
modal={
    overlay:{
        init:()=>{
            var overlay = document.createElement('overlay');
            overlay.id = 'welcomeDivs';
            overlay.innerHTML ="i m overlay text"
            document.body.appendChild(overlay);
             overlay.addEventListener('click',modal.overlay.remove);

        },
        remove:(e)=>{
            e.target.parentNode.removeChild(e.target);
        }       
    }
}

//ON DOCUMENT LOAD RUN INIT
document.addEventListener('DOMContentLoaded',init);

＆＃13;

Answer 2

您的代码是正确的，但您使用的方式错误。请问你将click事件绑定到none exists选择器

 $(function() {
        $("#welcomeDivs").click(function() {
            $(".parela").toggleClass('myClass');
        });
    });

在上面的代码中，您尝试将事件绑定到没有存在的代码。相反，你可以使用这个代码

 $(function() {
        $('body').on('click',"#welcomeDivs",function(event) {
             if($(event.target).attr('id')=='welcomeDivs')
            {
            $(".parela").toggleClass('myClass');
            }
        });
    });

如何在init中添加功能

2 个答案: