我在以下this
范围内遇到问题:
var test = {
$divs: $('div'),
init: function() {
this.$divs.each(function(){
$(this).on('click', test.whatsmyid);
$(window).on("resize", test.whatsmyid);
});
},
whatsmyid: function() {
console.log($(this).attr("id"));
}
};
test.init();
click事件正确处理this
的范围,但窗口调整大小则没有。我理解原因是this
没有传递给窗口调整大小事件但是我不想使用变量将元素传递给whatsmyid
所以我该如何解决这个问题?
答案 0 :(得分:3)
这是因为this
被resize
调用时是窗口。 Windows对象没有id
的。这就是它返回undefined
的原因。
如果您想更改功能中的this
,可以使用.bind
:
$(window).on("resize", test.whatsmyid.bind(this));
答案 1 :(得分:1)
我知道答案已被接受,但不是每个浏览器都支持.bind意味着IE 9以下的任何内容。
所以这是一个替代答案
var test = {
$divs: $('div'),
init: function() {
this.$divs.each(function(){
var $this = $(this);
$(this).on('click', test.whatsmyid);
$(window).on("resize", function () {
test.whatsmyid.call($this);
});
});
},
whatsmyid: function() {
console.log($(this).attr("id"));
}
};
test.init();
答案 2 :(得分:0)
我喜欢将eventData传递给bind函数。基本上,eventData是javascript PlainObject,您可以传递事件的信息。 jQuery bind()
var varModule = {
$divs: $("div"),
init: function() {
var me = this;
me.$divs.each(function() {
$(this).bind("click", { me: $(this) }, me.findID);
$(window).bind("resize", { me: me }, me.findID);
});
},
findID: function(event) {
var me = event.data.me; //You will get PlainObject in event.data
console.log(me.attr("id")); //div object will give you id but window object wont give you id attribute
}
};
(function() {
varModule.init();
})();