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

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