在JQuery中使用变量的正确方法是什么？

Question

我想一次引用一个元素，然后重用它抛出了我的代码，但是我不确定正确的方法。 以下是我尝试过的方法，但仅在某些地方有效。 （编辑：有效，代码中出现了一个错误，但是我仍然很好奇这是否是最佳实践。）

$(document).ready(function() {
  var image = $("#content img");
  image.wrap("<span />");
  image.hover(function(){}, function(){});
});

Answer 1

那应该工作。 您得到什么迹象表明image.hover()无法正常工作？

附带说明：这当然不是标准，但是当我做这样的事情时，我在带有$的jQuery对象前加上变量，因此： var $image = $("#content img"); -只是帮助我跟踪什么是jQuery对象。

Answer 2

hover()应该可以正常工作。 在传递给hover()的函数内部，使用$(this)来获取要悬停的元素。 所以：

$(document).ready(function() {
    var image = $("#content img");
    image.wrap("<span />");
    image.hover(function(){
        $(this).css({border:'5px solid red'});
    }, function(){
        $(this).css({border:'none'});
    });
});

这对我有用。

Answer 3

就像上面写的那样， var image是一个局部变量，范围仅限于名为onReady的匿名函数。 因此，在函数范围之外对该变量的任何调用都会产生ReferenceError 。 在Javascript中，用var开头的变量实例化将其标记为局部变量，而将其保留为一个全局变量（通常不建议这样做）。 考虑以下（人为）示例：

(function() {
  global_variable    = "global";
  var local_variable = "local";

  console.debug(global_variable);
  console.debug(local_variable);
})();

console.debug(global_variable);
console.debug(local_variable);

// Produces:

global
local
global
ReferenceError: local_variable is not defined

Answer 4

我不确定我会不会跟着你，贾里德。 如果您看一下下面的JS Bin，我（我想）复制了您的示例，它运行良好。

http://jsbin.com/izimi3/

也许这个问题是句法上的，还是范围上的？

另外，如果这实际上是代码（显然没有细节），那么我建议不要使用变量来存储它。 通常，当您经常要重用选择器时，您会希望使用变量（例如“ $ this = $（this）”），否则，保持代码足够简单以使您可以立即使用所需的选择器事情对您来说更容易。

无论如何，我希望我没看错，而不仅仅是浪费时间。

Answer 5

您的代码对我来说很好...在回调中创建局部变量，就像您所做的一样，总是比使用全局对象更好。 但是，jQuery的优点在于您可以缩短代码，甚至根本不使用变量：

$(document).ready(function() {
  $("#content img").wrap("<span />").hover(function(){}, function(){});
});

这称为链接 ，它允许您在一个表达式中将jQuery对象的方法“链接”在一起。 但是，如果出于任何原因您确实需要该变量，我认为它没有任何问题。