作爲對象屬性訪問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

您的代碼正常工作。爲什麼它不起作用的唯一原因是計算器在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，你可能會看到「未定義」或崩潰的代碼。

Answer 3

由於您使用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

您</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()); 
});