是否将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，因为定义它的语句尚未完成。