有没有办法在 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)}  
);

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

一种选择是将您的值存储在使用 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)
});

此方法不会创建全局变量。

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

或者使用 JQuery data api。

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

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

您也可以等待 dom ready 事件触发来添加代码，但您不能，然后执行速度更快。所以，对我来说，最好的方法是将你的翻转声明放入一个anonymouse函数中，该函数将位于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>

相关内容

最新更新

热门标签：