Question

我试图使用jQuery将元素设置为对象的属性。当我直接引用jquery对象时，它可以工作，但是当我通过计算器对象进行引用时，它并没有。

我该如何解决这个问题？

var calculator = {

    settings: {
        displayNumber: $('.dispNumber'),
        modNumber: $('.modNumber')
    }
}

window.onload = function(){
    console.log( $('.dispNumber').html() ); //this one works    
    console.log( calculator.settings.displayNumber.html() ); //this one doesn't
}

Answer 1

如果未在dom ready范围内创建calculator.settings.displayNumber，则它将没有元素。

Answer 2

由于您使用的是jQuery，因此您应该将处理DOM的所有内容放在：

中

$(function() {
    //code here will always run after the DOM is ready.
    var calculator = {
        settings: {
            displayNumber: $('.dispNumber'),
            modNumber: $('.modNumber')
        }
    };

    console.log( $('.dispNumber').html() ); //this one works    
    console.log( calculator.settings.displayNumber.html() ); //this one doesn't
});

OR

只需在<script>........code.......</script>之前添加</body>。

第一个是处理与DOM相关的操作的正确方法。

编辑：可重复使用的对象：

var Calculator = function($) {
    this.settings = {
        displayNumber: $('.dispNumber'),
        modNumber: $('.modNumber')
    };
};

Calculator.prototype = {
    log: function() {
        console.log(this.settings.displayNumber.html());
        console.log(this.settings.modNumber.html());
    }
}

$(function(){
    var calculator = new Calculator($);
    calculator.log();
    console.log(calculator.settings.displayNumber.html());
});

Answer 3

您的代码运行正常。它不应该工作的唯一原因是计算器在window.onload之前没有实现。

删除该问题，一切正常。请参阅：http://jsfiddle.net/352Cm/

var calculator = {

    settings: {
        displayNumber: $('.dispNumber'),
        modNumber: $('.modNumber')
    }
}

console.log( $('.dispNumber').html() ); //this one works    
console.log( calculator.settings.displayNumber.html() ); //this one doesn't

在console.log(calculator)中尝试window.load，您可能会看到“未定义”或代码崩溃。

访问jQuery元素引用作为对象属性

3 个答案: