使用方法更改对象的属性值

时间:2016-01-08 02:32:05

标签: javascript jquery web

我是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!

我希望你能帮助我。

1 个答案:

答案 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);
});