javascript - 将 JQuery 选定元素存储为 JavaScript 对象属性？

Question

这希望是我忽略的非常简单的事情，但我只是尝试将 JQuery 引用存储为属性，以便我可以更轻松地重用它。

var debug = {
  pane: $('#debugOutput'),
  show: function() {
    debug.pane.show();
    console.log(debug.pane.length);  //0
    console.log($('#debugOutput').length);  //1
  }
}

.show() 不起作用。该元素永远不可见。在 Chrome 控制台中，debug.pane 如下所示:

当然，还有实际的 JQuery 对象:

Answer 1

您应该使用this而不是debug:

let debug = {
  pane: $('#debugOutput'),
  show: function() {
    this.pane.show();
    console.log(this.pane.length);  //1
    console.log($('#debugOutput').length);  //1
  }
}

debug.show();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="https://placehold.it/300" style="display:none" id="debugOutput">

您不能引用 debug 本身，因为定义它的语句尚未完成。