Question

鉴于以下代码，我为什么会为a和b获取不同的值？我原以为他们会回复同样的事情：

(function() {
    var a = $('#foo');

    var Test = function(){
    console.log(a); //outputs 'jQuery()'
    var b = $('#foo');
    console.log(b); //outputs 'jQuery(select#foo)' which is what I want
    };
})();

这个问题源于我试图将经常使用的选择器粘贴到变量中。最初我在每个方法中都这样做（就像我在上面的例子中用var b做的那样）但后来我发现我需要在多种方法中使用选择器，所以我把作业移出去了（或者我认为）对那个匿名函数中的所有方法。如你所见，它不起作用。这是为什么？

编辑：此代码由单击触发的方法加载。 id foo在页面加载时出现，不会动态设置或更改。

Answer 1

确保在页面加载完成后才调用代码！

$(function() {
  // your code
});

当然，您还需要小心缓存客户端应用程序的其他部分可能在页面上更改的内容。

Answer 2

只是为了改进上一个答案 - b仅在您调用Test函数时进行评估，可能是在加载页面后。将选择器缓存在文档就绪中：

 $(document).ready(function(){
   var a = $('#foo');
 });

当我在代码块中使用相同的选择器时，我只缓存选择器。我使用$ variable命名约定：

var $divs = $('div');

您还可以将函数链接在一起以避免必须缓存选择器：

$('div').append('hello world').addclass('hello').show();

我不明白的缓存Jquery选择器行为

2 个答案: