1

我的代码如下所示：

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() 中的两个函数之间共享颜色。我对全局变量一无所知，但我认为除非必要，否则最好避免使用它们，尽管我知道函数之间共享值是它们的用途。我仍然想看看是否有人知道这样做的更好方法。

4

4 回答 4

5

一种选择是将您的值存储在使用该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)
});​
于 2012-12-01T14:44:21.503 回答
4

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

$(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)}  
        );)
});
于 2012-12-01T14:50:27.850 回答
1

或者使用 JQuery 数据 api。

$(this).data("myCustomData", "Hi");
于 2012-12-01T14:48:58.490 回答
0

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

您也可以等待 dom 就绪事件触发以添加您的代码，但您不能然后更快地执行。所以，对我来说，最好的方法是将您的翻转声明放入一个匿名函数中，该函数将位于 html 正文标记末尾的脚本标记中。如果你害怕在 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>
于 2012-12-01T15:00:27.057 回答