javascript - 有没有办法在不使用全局变量的情况下在 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)
});​