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我已经编辑了上面的代码。现在活动已经停止了,有什么想法吗?