我是JavaScript和jQuery的新手,但在其他语言方面有一些编程经验。这就是我写的:
var pageFunctionality = {
value: 0,
onUpdate: function () {
$("#numberOfTimes").html(pageFunctionality.value);
console.log(pageFunctionality.value + "!");
},
onBtnClick: function () {
this.value++;
console.log(this.value);
pageFunctionality.onUpdate();
}
};
$(document).ready(function () {
$("#btn").click(pageFunctionality.onBtnClick);
});
问题在于:当我记录"值"在" onBtnClick"内,它明显增加,但是当我在onUpdate方法中记录它时,它保持为0。
这是它产生的输出:
1
0!
2
0!
3
0!
4
0!
我希望你能帮助我。
答案 0 :(得分:0)
this
处理程序中onBtnClick()
的值存在问题,因为它是从.click()
处理程序调用它的方式。默认情况下,jQuery会将this
设置为您将事件处理程序挂钩到的DOM元素。
如果您不需要在点击处理程序中访问该DOM元素,那么您可以将代码更改为:
$(document).ready(function () {
$("#btn").click(pageFunctionality.onBtnClick.bind(pageFunctionality));
});
像这样使用.bind()
会将this
的值覆盖为您想要的值。
或者,由于pageFunctionality
是单身,您可以在事件处理程序中停止使用this
并直接引用pageFunctionality
,如下所示:
var pageFunctionality = {
value: 0,
onUpdate: function () {
$("#numberOfTimes").html(pageFunctionality.value);
console.log(pageFunctionality.value + "!");
},
onBtnClick: function () {
pageFunctionality.value++;
console.log(pageFunctionality.value);
pageFunctionality.onUpdate();
}
};
$(document).ready(function () {
$("#btn").click(pageFunctionality.onBtnClick);
});