Question

我的代码如下所示：

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)}  
);

它工作正常，但它依赖于全局变量来共享hover（）中两个函数之间的颜色。我不知道关于全局变量的一切，但我认为除非必要，否则最好避免它们，尽管我知道在函数之间共享值是它们的用途。我还是想知道是否有人知道更好的方法。

Answer 1

一个选项是使用data-*属性将值存储在动画的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)
});

Answer 2

这种方法不会创建全局变量。

$(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)}  
        );)
});

Answer 3

或者使用JQuery数据api。

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

Answer 4

数据属性不是好事，因为它们可以通过任何类型的html调试器（如firebug）进行编辑。这可能意味着拥有它的任何人都可以改变你的代码的行为（它可以进行翻转，但要进一步思考......）

您可以等待dom ready事件触发以添加您的代码，但您可以不然后执行速度更快。所以，对我来说，最好的方法是将你的翻转声明放到一个匿名函数中，该函数将位于html body标签末尾的脚本标记中。如果你在加载jQuery之前害怕执行，你可以简单地使用defer属性（compat'on caniuse.com）

<html>
  <head>
    ...
    <script src="jquery.min.js" type="text/javascript" defer="defer"></script>
    ...
    </head>

  <body>
    ...
    <script type="text/javascript" defer="defer">
      (function()
      {
        var strictly_private_var = 1;
        /* do your rollover */

      })();

    </script>
  </body>
</html>

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

4 个答案: