Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/477.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 即使类名不为';不存在_Javascript_Jquery_Html - Fatal编程技术网

Javascript 即使类名不为';不存在

Javascript 即使类名不为';不存在,javascript,jquery,html,Javascript,Jquery,Html,有人能给我解释一下,当一个事件的目标类名不存在时,它是如何触发的 代码 (function ($) { var config = {}; $(document).ready(function () { var wi = $(window).width(); if ( wi > 768 ) { $('body').addClass('dosomething'); } else {

有人能给我解释一下,当一个事件的目标类名不存在时,它是如何触发的

代码

 (function ($) {

    var config = {};

    $(document).ready(function () {

        var wi = $(window).width();

        if ( wi > 768 ) {
            $('body').addClass('dosomething');
        } else {
            $('body').removeClass('dosomething');
        }

        $(window).resize(function() {

            var wi = $(window).width();

            console.log(wi);

            if ( wi > 768 ) {
                $('body').addClass('dosomething');
            } else {
                $('body').removeClass('dosomething');
            }

            var $container = $('.email-signup__wrap'),
            $cHeight = $('.email-signup').outerHeight();

            // $('.dosomething .email-signup__wrap').on('mouseenter mouseleave', function(ev) {
            $('body').on('mouseenter mouseleave', '.dosomething .email-signup__wrap' , function(ev) {

                var $this = $(this);

                if ( ev.type === 'mouseenter' ) {

                    TweenMax.to($container, .4, {
                        ease: Power2.easeOut,
                        css:{
                            overflow: 'visible',
                            position: 'absolute',
                            top: -$cHeight
                        }
                    });
                }
                else
                {
                    TweenMax.to($container, .4, {
                        ease: Power2.easeOut,
                        css:{
                            position: 'relative',
                            top: 0
                        },
                        onComplete: hide
                    });

                    function hide(){
                        $container.css('overflow', 'hidden');
                    }

                    $("div.mce_inline_error").remove();
                }
            });
        });
    });

})( jQuery );
为了防止事件在768px以下的屏幕上触发,我在为每个选择器添加dosomething类时有点过火

基本上,用户将鼠标悬停在页脚栏上,然后从画布外弹出一个联系人表单,但是在较小的屏幕/手机上,它在页面内容的底部保持静态

我知道这是一个基本的代码,然而,我已经试着让它工作了好几天,我正在匆忙地编写代码,试图找到一个解决方案

我不是在工作,媒体查询等。。。。为了我自己的理智,我真的很想理解这一点

最终工作方案

  (function ($) {

        var config = {};

        $(document).ready(function () {

            $(window).on("resize", function () {
                resizeWindow();
            }).trigger("resize");

            var $container = $('.email-signup__wrap'),
                $cHeight = $('.email-signup').outerHeight();

            $(document).on({
                mouseenter: function() {
                    TweenMax.to($container, .4, {
                        ease: Power2.easeOut,
                        css:{
                            overflow: 'visible',
                            position: 'absolute',
                            top: -$cHeight
                        }
                    });
                },
                mouseleave: function() {
                    TweenMax.to($container, .4, {
                        ease: Power2.easeOut,
                        css:{
                            position: 'relative',
                            top: 0
                        },
                        onComplete: hide
                    });

                    function hide(){
                        $container.css('overflow', 'hidden');
                    }

                    $("div.mce_inline_error").remove();
                }
            }, ".dosomething .email-signup__wrap");
        });

        function resizeWindow() {
            config.wWidth = $(window).width();

            if ( config.wWidth > 768 ) {
                $('body').addClass('dosomething');
            } else {
                $('body').removeClass('dosomething');
            }
        }

    })( jQuery );

在jquery中使用
事件委派
。动态添加类
.dosomething

$('body').on('mouseenter mouseleave', '.dosomething .email-signup__wrap' , function(ev) {

删除
$(文档).ready(函数(){
,因为
(函数($){
是相同的。@C-link否不是。
$(函数(){
是相同的。(函数($){这是JavaScription中的闭包。你能解释一下让我理解吗?你添加和删除了doSomething类。你还为同一个类编写了mouseenter mouseleave事件。因此脚本会检查所有时间类是否存在。但是事件委派会让它移动到文档中搜索cla我已经编辑了上面的代码。现在活动已经停止了,有什么想法吗?