为什么老师说 delay 是 options 的 没有听懂 ?
(function ($) {
'use strict'
function Dropdown(elem, options) {
this.$elem = $(elem);
this.options = options;
this.$layer = this.$elem.find('.dropdown-layer');
this.activeClass = options.active + '-active';
this.$layer.showHide(options);
var self = this;
if (options.event === 'click') {
this.$elem.on('click', function (e) {
self.show();
e.stopPropagation();
});
$(document).on('click', $.proxy(this.hide, this));
} else {
this.$elem.hover($.proxy(this.show, this), $.proxy(this.hide, this));
}
};
Dropdown.DEFAULTS = {
event: "hover",
css3: true,
js: true,
animation: 'fade',
delay: 1000,
active: 'dropdown'
};
//作业部分代码修改
// this.$elem.addClass(this.activeClass);
// this.$layer.showHide('show');
Dropdown.prototype.show = function () {
var self = this;
if (this.options.delay) {
this.timer = setTimeout(function () {
_show();
}, this.options.delay);
} else {
_show();
}
function _show() {
self.$elem.addClass(self.activeClass);
self.$layer.showHide('show');
}
}
Dropdown.prototype.hide = function () {
if (this.options.delay) {
clearTimeout(this.timer);
}
this.$elem.removeClass(this.activeClass);
this.$layer.showHide('hide');
};
// var dropdown = new Dropdown();
// var dropdown2 = new Dropdown();
// var dropdown3 = new Dropdown();
// dropdown.show();
// dropdown.hide();
// function dropdown(elem, options) {
// var $elem = $(elem),
// $layer = $elem.find('.dropdown-layer'),
// activeClass = $elem.data('active') + '-active';
// // $layer.showHide({
// // css3: true,
// // js: true,
// // animation: 'slideUpDown'
// // }); //在这里传参,不方便,易于出错,应该在调用时传参。
// $layer.showHide(options);
// $elem.hover(function() {
// $elem.addClass(activeClass);
// $layer.showHide('show');
// }, function() {
// $elem.removeClass(activeClass);
// $layer.showHide('hide');
// });
// }
// var defaults = {
// css3: true,
// js: true,
// animation: 'slideUpDown'
// };
$.fn.extend({
dropdown: function (option) {
return this.each(function () {
var options = $.extend({}, Dropdown.DEFAULTS, $(this).data(), option);
new Dropdown(this, options);
});
}
});
})(jQuery);不懂 this.options = options; 这行代码
为什么这么写了 下面这些代码就能生效 delay 就定义了
Dropdown.prototype.show = function () {
var self = this;
if (this.options.delay) {
this.timer = setTimeout(function () {
_show();
}, this.options.delay);
} else {
_show();
}
self.$elem.addClass(self.activeClass);
self.$layer.showHide('show');
function _show() {
self.$elem.addClass(self.activeClass);
self.$layer.showHide('show');
}
};
Dropdown.prototype.hide = function () {
if (this.options.delay) {
clearTimeout(this.timer);
};
this.$elem.removeClass(this.activeClass);
this.$layer.showHide('hide');
};18
收起
正在回答
1回答
同学你好,this.options = options;写这句可以理解为:把options绑定到实例化对象上。
可以打印看下:

控制台:

如果不写的话,那么控制台打印结果如下:

没有options是读取不到delay,不能实现效果。
如果我的回答帮到了你,欢迎采纳,祝学习愉快~
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星