Javascript 在jquery的hover（）中，有没有办法在不使用全局变量的情况下共享两个函数之间的变量？

我的代码如下所示：

quickbarcolor = $("#quick-bar a").css("color");
$("#quick-bar a").hover(function () {
  if ($(this).css("color") != quickbarcolor) quickbarcolorhover = $(this).css("color");
 V$(this).animate({ color: quickbarcolorhover },400);
}, function() {
  $(this).animate({ 'color': quickbarcolor},400)}  
);

---

它工作得很好，但它依赖于全局变量来共享悬停中两个函数之间的颜色。我并不完全了解全局变量，但我认为除非必要，否则最好避免使用它们，尽管我知道函数之间共享值是它们的目的。不过，我还是想看看是否有人知道更好的方法。

一个选项是将值存储在使用属性设置动画的DOM元素上。我的意思是：

$.data($("#quick-bar a"), "col", $("#quick-bar a").css("color"));

$("#quick-bar a").hover(function() {
    var self = $(this);
    var col = $.data(self, "col");
    if ($(this).css("color") != col) {
         $.data(self, "col", self.css("color"));
    }

    self.animate({
        color: col
    }, 400);

    $.data(self, "col", self.css("color");
}, function() {
    $(this).animate({
        'color':  $.data($(this), "col");
    }, 400)
});​

---

一个选项是将值存储在使用属性设置动画的DOM元素上。我的意思是：

$.data($("#quick-bar a"), "col", $("#quick-bar a").css("color"));

$("#quick-bar a").hover(function() {
    var self = $(this);
    var col = $.data(self, "col");
    if ($(this).css("color") != col) {
         $.data(self, "col", self.css("color"));
    }

    self.animate({
        color: col
    }, 400);

    $.data(self, "col", self.css("color");
}, function() {
    $(this).animate({
        'color':  $.data($(this), "col");
    }, 400)
});​

---

或者使用JQuery数据api

$(this).data("myCustomData", "Hi");

---

或者使用JQuery数据api

$(this).data("myCustomData", "Hi");

---

这种方法不创建全局变量

$(function() {
  var quickBar = $("#quick-bar a"),
      quickbarcolor = quickBar.css("color");

    quickBar.hover(function () {
        var $this = $(this), 
            color = $this.css("color");
        if ( color != quickbarcolor) {
             $this.animate({ color: color },400);
        }

    }, function() {
        $(this).animate({ 'color': quickbarcolor},400)}  
        );)
});

---

这种方法不创建全局变量

$(function() {
  var quickBar = $("#quick-bar a"),
      quickbarcolor = quickBar.css("color");

    quickBar.hover(function () {
        var $this = $(this), 
            color = $this.css("color");
        if ( color != quickbarcolor) {
             $this.animate({ color: color },400);
        }

    }, function() {
        $(this).animate({ 'color': quickbarcolor},400)}  
        );)
});

数据属性不是一件好事，因为它们可以通过任何类型的html调试器（如firebug）进行编辑。这可能意味着任何使用它的人都可以更改代码的行为。可以进行滚动，但请进一步考虑

您可以等待dom就绪事件触发后再添加代码，但不能这样做，然后执行速度会更快。所以，对我来说，最好的方法是将滚动声明放入一个匿名函数中，该函数将位于html主体标记末尾的脚本标记中。如果您害怕在jQuery加载之前执行，只需在上使用defer属性compat即可

数据属性不是一件好事，因为它们可以通过任何类型的html调试器（如firebug）进行编辑。这可能意味着任何使用它的人都可以更改代码的行为。可以进行滚动，但请进一步考虑

您可以等待dom就绪事件触发后再添加代码，但不能这样做，然后执行速度会更快。所以，对我来说，最好的方法是将滚动声明放入一个匿名函数中，该函数将位于html主体标记末尾的脚本标记中。如果您害怕在jQuery加载之前执行，只需在上使用defer属性compat即可

---

---

哇-从未想过，好主意，它是如何工作的，我会使用attr吗？Edited提供一个未经测试的示例，但给出了基本想法。我使用复制/粘贴快速生成一些东西，编辑以提供更好的代码。难道你不必使用每个循环，因为每个“a”都可能有不同的颜色吗？哇-从未想过，好主意，它是如何工作的，我会使用attr？Edited来提供一个未经测试的示例，但给出了基本的想法。我使用复制/粘贴来快速制作一些东西，编辑来提供更好的代码。您不需要使用每个循环来创建，因为每个“a”都可能有不同的颜色吗？您的jQuery代码是否在就绪处理程序中？如果是，您可以在该处理程序中创建局部变量。显然是。。。没想到。。。duhA参加聚会有点晚了，但根据我的说法，这就是解决问题的方法->您的jQuery代码是否在就绪处理程序中？如果是，您可以在该处理程序中创建局部变量。显然是。。。没想到。。。duhA参加派对有点晚了，但根据我->抱歉，这是解决问题的方法。。。也许这是常识，但我找不到任何信息。我知道这可能值得提出自己的问题，但您能否详细说明数据属性并不是一件好事，因为它们可以通过任何类型的html调试器（如firebug）进行编辑。你是说在服务器上编辑代码。。。当然不是。。。这将使数据属性成为主要的安全责任，不是吗。。。你能详细说明一下吗；或者给我指一个资源？你知道firebug吗？或者chrome调试器？任何人都可以使用它并更改当前浏览页面的html/css/js行为。当然，这不会保存在服务器上。当然，改变的行为可能是未成年人。但请记住，数据集数据属性可以被视为全局javascript变量，因为它们可以通过简单的document.getElementByIdmyId.getAttributedata-myDataAttribute自由访问，并以相同的方式进行设置。是的，我们已经使用firebug很长时间了。但是我真的不明白。。。其他所有内容也可以通过firebug以这种方式进行编辑，但它只是本地的。我不明白这有多糟糕。。。或者数据属性与其他属性有什么不同。它们可以被视为全局变量这一事实是否会让情况变得更糟？我相信你是对的，但我不太明白它是如何工作的。我将对此提出一个新问题，以便您可以根据需要提供更详细的答案。这可能是因为我非常偏执：但事实上，javascript控制台可以编辑数据集，存储可能与服务器的ajax调用相关的数据可能是错误的。我同意你的观点，在你的情况下，这不是很相关。但对我来说重要的是，它并不总是最好的功能。对不起。。。也许这是常识，但我找不到任何信息。我知道这很重要

---

这可能值得提出自己的问题，但您能否详细说明数据属性并不是一件好事，因为它们可以通过任何类型的html调试器（如firebug）进行编辑。你是说在服务器上编辑代码。。。当然不是。。。这将使数据属性成为主要的安全责任，不是吗。。。你能详细说明一下吗；或者给我指一个资源？你知道firebug吗？或者chrome调试器？任何人都可以使用它并更改当前浏览页面的html/css/js行为。当然，这不会保存在服务器上。当然，改变的行为可能是未成年人。但请记住，数据集数据属性可以被视为全局javascript变量，因为它们可以通过简单的document.getElementByIdmyId.getAttributedata-myDataAttribute自由访问，并以相同的方式进行设置。是的，我们已经使用firebug很长时间了。但是我真的不明白。。。其他所有内容也可以通过firebug以这种方式进行编辑，但它只是本地的。我不明白这有多糟糕。。。或者数据属性与其他属性有什么不同。它们可以被视为全局变量这一事实是否会让情况变得更糟？我相信你是对的，但我不太明白它是如何工作的。我将对此提出一个新问题，以便您可以根据需要提供更详细的答案。这可能是因为我非常偏执：但事实上，javascript控制台可以编辑数据集，存储可能与服务器的ajax调用相关的数据可能是错误的。我同意你的观点，在你的情况下，这不是很相关。但对我来说重要的是，它并不总是最好的功能。