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

Accessing a jQuery element reference as an object property

本文关键字：属性 访问 对象 jQuery 元素 引用      更新时间：2023-09-26

我正在尝试使用jQuery将元素设置为对象的属性。当我直接引用jquery对象时，它是有效的，但是当我通过calculator对象进行引用时，它不起作用。

我该如何解决这个问题？

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
}

如果calculator.settings.displayNumber不是在dom就绪的作用域中创建的，那么它就没有元素。

由于您使用的是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
});

或

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

第一个是处理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());
});

您的代码运行良好。它不应该工作的唯一原因是计算器没有在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

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

相关文章：