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

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

如果calculator.settings.displayNumber不是在 dom 就绪范围内创建，它将没有元素。

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

或者

只需<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您可能会看到“未定义”或崩溃代码。